Commit a81dc06c7d54d4298824aab9906c9581a3e57680
1 parent
d0e206c5
publish 0.9.9-rc-4
optimizing Table performance
Showing
3 changed files
with
26 additions
and
20 deletions
Show diff stats
package.json
| 1 | { | 1 | { |
| 2 | "name": "iview", | 2 | "name": "iview", |
| 3 | - "version": "0.9.9-rc-3", | 3 | + "version": "0.9.9-rc-4", |
| 4 | "title": "iView", | 4 | "title": "iView", |
| 5 | "description": "A high quality UI components Library with Vue.js", | 5 | "description": "A high quality UI components Library with Vue.js", |
| 6 | "homepage": "http://www.iviewui.com", | 6 | "homepage": "http://www.iviewui.com", |
src/components/table/table.vue
| @@ -21,7 +21,7 @@ | @@ -21,7 +21,7 @@ | ||
| 21 | :columns-width="columnsWidth" | 21 | :columns-width="columnsWidth" |
| 22 | :obj-data="objData"></table-body> | 22 | :obj-data="objData"></table-body> |
| 23 | </div> | 23 | </div> |
| 24 | - <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle"> | 24 | + <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle" v-if="isLeftFixed"> |
| 25 | <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> | 25 | <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> |
| 26 | <table-head | 26 | <table-head |
| 27 | fixed="left" | 27 | fixed="left" |
| @@ -43,7 +43,7 @@ | @@ -43,7 +43,7 @@ | ||
| 43 | :obj-data="objData"></table-body> | 43 | :obj-data="objData"></table-body> |
| 44 | </div> | 44 | </div> |
| 45 | </div> | 45 | </div> |
| 46 | - <div :class="[prefixCls + '-fixed-right']" :style="fixedRightTableStyle"> | 46 | + <div :class="[prefixCls + '-fixed-right']" :style="fixedRightTableStyle" v-if="isRightFixed"> |
| 47 | <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> | 47 | <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> |
| 48 | <table-head | 48 | <table-head |
| 49 | fixed="right" | 49 | fixed="right" |
| @@ -226,6 +226,12 @@ | @@ -226,6 +226,12 @@ | ||
| 226 | } | 226 | } |
| 227 | }); | 227 | }); |
| 228 | return right.concat(other); | 228 | return right.concat(other); |
| 229 | + }, | ||
| 230 | + isLeftFixed () { | ||
| 231 | + return this.columns.some(col => col.fixed && col.fixed === 'left'); | ||
| 232 | + }, | ||
| 233 | + isRightFixed () { | ||
| 234 | + return this.columns.some(col => col.fixed && col.fixed === 'right'); | ||
| 229 | } | 235 | } |
| 230 | }, | 236 | }, |
| 231 | methods: { | 237 | methods: { |
| @@ -342,8 +348,8 @@ | @@ -342,8 +348,8 @@ | ||
| 342 | }, | 348 | }, |
| 343 | handleBodyScroll (event) { | 349 | handleBodyScroll (event) { |
| 344 | if (this.showHeader) this.$els.header.scrollLeft = event.target.scrollLeft; | 350 | if (this.showHeader) this.$els.header.scrollLeft = event.target.scrollLeft; |
| 345 | - if (this.leftFixedColumns.length) this.$els.fixedBody.scrollTop = event.target.scrollTop; | ||
| 346 | - if (this.rightFixedColumns.length) this.$els.fixedRightBody.scrollTop = event.target.scrollTop; | 351 | + if (this.isLeftFixed) this.$els.fixedBody.scrollTop = event.target.scrollTop; |
| 352 | + if (this.isRightFixed) this.$els.fixedRightBody.scrollTop = event.target.scrollTop; | ||
| 347 | this.hideColumnFilter(); | 353 | this.hideColumnFilter(); |
| 348 | }, | 354 | }, |
| 349 | handleMouseWheel (event) { | 355 | handleMouseWheel (event) { |
test/routers/table.vue
| @@ -9,21 +9,21 @@ | @@ -9,21 +9,21 @@ | ||
| 9 | return { | 9 | return { |
| 10 | self: this, | 10 | self: this, |
| 11 | columns7: [ | 11 | columns7: [ |
| 12 | -// { | ||
| 13 | -// title: '姓名', | ||
| 14 | -// key: 'name', | ||
| 15 | -// render (row, column, index) { | ||
| 16 | -// return `<strong>${row.name}</strong>`; | ||
| 17 | -// } | ||
| 18 | -// }, | ||
| 19 | -// { | ||
| 20 | -// title: '年龄', | ||
| 21 | -// key: 'age' | ||
| 22 | -// }, | ||
| 23 | -// { | ||
| 24 | -// title: '地址', | ||
| 25 | -// key: 'address' | ||
| 26 | -// }, | 12 | + { |
| 13 | + title: '姓名', | ||
| 14 | + key: 'name', | ||
| 15 | + render (row, column, index) { | ||
| 16 | + return `<strong>${row.name}</strong>`; | ||
| 17 | + } | ||
| 18 | + }, | ||
| 19 | + { | ||
| 20 | + title: '年龄', | ||
| 21 | + key: 'age' | ||
| 22 | + }, | ||
| 23 | + { | ||
| 24 | + title: '地址', | ||
| 25 | + key: 'address' | ||
| 26 | + }, | ||
| 27 | { | 27 | { |
| 28 | title: '操作', | 28 | title: '操作', |
| 29 | key: 'action', | 29 | key: 'action', |