Commit 68b308ee837b8f9e0a7ab7d8a8bfdecba8bada2d
1 parent
82d90c4f
fixex #1353
Showing
4 changed files
with
131 additions
and
53 deletions
Show diff stats
examples/routers/table.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Table border :columns="columns5" :data="data5" @on-select="onSelect(true)" @on-select-cancel="onSelect(false)"></Table> | 2 | + <div> |
| 3 | + <div style="margin: 10px"> | ||
| 4 | + 显示边框 <i-switch v-model="showBorder" style="margin-right: 5px"></i-switch> | ||
| 5 | + 显示斑马纹 <i-switch v-model="showStripe" style="margin-right: 5px"></i-switch> | ||
| 6 | + 显示索引 <i-switch v-model="showIndex" style="margin-right: 5px"></i-switch> | ||
| 7 | + 显示多选框 <i-switch v-model="showCheckbox" style="margin-right: 5px"></i-switch> | ||
| 8 | + 显示表头 <i-switch v-model="showHeader" style="margin-right: 5px"></i-switch> | ||
| 9 | + 表格滚动 <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch> | ||
| 10 | + <br> | ||
| 11 | + <br> | ||
| 12 | + 表格尺寸 | ||
| 13 | + <Radio-group v-model="tableSize" type="button"> | ||
| 14 | + <Radio label="large">大</Radio> | ||
| 15 | + <Radio label="default">中</Radio> | ||
| 16 | + <Radio label="small">小</Radio> | ||
| 17 | + </Radio-group> | ||
| 18 | + </div> | ||
| 19 | + <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 250 : ''" :size="tableSize" :data="tableData3" :columns="tableColumns3"></Table> | ||
| 20 | + </div> | ||
| 3 | </template> | 21 | </template> |
| 4 | <script> | 22 | <script> |
| 5 | - import etable from '../components/table.vue'; | ||
| 6 | - import test from '../components/test.vue'; | ||
| 7 | export default { | 23 | export default { |
| 8 | data () { | 24 | data () { |
| 9 | return { | 25 | return { |
| 10 | - columns5: [ | 26 | + tableData3: [ |
| 11 | { | 27 | { |
| 12 | - type: 'selection', | ||
| 13 | - width: 60, | ||
| 14 | - align: 'center' | ||
| 15 | - }, | ||
| 16 | - { | ||
| 17 | - type: 'expand', | ||
| 18 | - render: (h) => { | ||
| 19 | - console.log('______hover______'); | ||
| 20 | - return h(etable); | ||
| 21 | - }, | ||
| 22 | - width: 50 | ||
| 23 | - }, | ||
| 24 | - { | ||
| 25 | - title: '日期', | ||
| 26 | - key: 'date', | ||
| 27 | - sortable: true | 28 | + name: '王小明', |
| 29 | + age: 18, | ||
| 30 | + address: '北京市朝阳区芍药居', | ||
| 31 | + date: '2016-10-03' | ||
| 28 | }, | 32 | }, |
| 29 | { | 33 | { |
| 30 | - title: '姓名', | ||
| 31 | - key: 'name' | 34 | + name: '张小刚', |
| 35 | + age: 24, | ||
| 36 | + address: '北京市海淀区西二旗', | ||
| 37 | + date: '2016-10-01' | ||
| 32 | }, | 38 | }, |
| 33 | { | 39 | { |
| 34 | - title: '年龄', | ||
| 35 | - key: 'age', | ||
| 36 | - sortable: true | 40 | + name: '李小红', |
| 41 | + age: 30, | ||
| 42 | + address: '上海市浦东新区世纪大道', | ||
| 43 | + date: '2016-10-02' | ||
| 37 | }, | 44 | }, |
| 38 | { | 45 | { |
| 39 | - title: '地址', | ||
| 40 | - key: 'address' | 46 | + name: '周小伟', |
| 47 | + age: 26, | ||
| 48 | + address: '深圳市南山区深南大道', | ||
| 49 | + date: '2016-10-04' | ||
| 41 | }, | 50 | }, |
| 42 | { | 51 | { |
| 43 | - title: '操作', | ||
| 44 | - key: 'name', | ||
| 45 | - render: (h, params) => { | ||
| 46 | - return h(test, { | ||
| 47 | - props: { | ||
| 48 | - row: params.row | ||
| 49 | - } | ||
| 50 | - }); | ||
| 51 | - } | ||
| 52 | - } | ||
| 53 | - ], | ||
| 54 | - data5: [ | ||
| 55 | - { | ||
| 56 | name: '王小明', | 52 | name: '王小明', |
| 57 | age: 18, | 53 | age: 18, |
| 58 | address: '北京市朝阳区芍药居', | 54 | address: '北京市朝阳区芍药居', |
| @@ -60,7 +56,7 @@ | @@ -60,7 +56,7 @@ | ||
| 60 | }, | 56 | }, |
| 61 | { | 57 | { |
| 62 | name: '张小刚', | 58 | name: '张小刚', |
| 63 | - age: 25, | 59 | + age: 24, |
| 64 | address: '北京市海淀区西二旗', | 60 | address: '北京市海淀区西二旗', |
| 65 | date: '2016-10-01' | 61 | date: '2016-10-01' |
| 66 | }, | 62 | }, |
| @@ -75,15 +71,89 @@ | @@ -75,15 +71,89 @@ | ||
| 75 | age: 26, | 71 | age: 26, |
| 76 | address: '深圳市南山区深南大道', | 72 | address: '深圳市南山区深南大道', |
| 77 | date: '2016-10-04' | 73 | date: '2016-10-04' |
| 78 | - }, | ||
| 79 | - ] | 74 | + } |
| 75 | + ], | ||
| 76 | + showBorder: false, | ||
| 77 | + showStripe: false, | ||
| 78 | + showHeader: true, | ||
| 79 | + showIndex: true, | ||
| 80 | + showCheckbox: false, | ||
| 81 | + fixedHeader: false, | ||
| 82 | + tableSize: 'default' | ||
| 80 | } | 83 | } |
| 81 | }, | 84 | }, |
| 82 | - | ||
| 83 | - methods: { | ||
| 84 | - onSelect (value) { | ||
| 85 | - window.alert(value); | 85 | + computed: { |
| 86 | + tableColumns3 () { | ||
| 87 | + let columns = []; | ||
| 88 | + if (this.showCheckbox) { | ||
| 89 | + columns.push({ | ||
| 90 | + type: 'selection', | ||
| 91 | + width: 60, | ||
| 92 | + align: 'center' | ||
| 93 | + }) | ||
| 94 | + } | ||
| 95 | + if (this.showIndex) { | ||
| 96 | + columns.push({ | ||
| 97 | + type: 'index', | ||
| 98 | + width: 60, | ||
| 99 | + align: 'center' | ||
| 100 | + }) | ||
| 101 | + } | ||
| 102 | + columns.push({ | ||
| 103 | + title: '日期', | ||
| 104 | + key: 'date', | ||
| 105 | + sortable: true | ||
| 106 | + }); | ||
| 107 | + columns.push({ | ||
| 108 | + title: '姓名', | ||
| 109 | + key: 'name' | ||
| 110 | + }); | ||
| 111 | + columns.push({ | ||
| 112 | + title: '年龄', | ||
| 113 | + key: 'age', | ||
| 114 | + sortable: true, | ||
| 115 | + filters: [ | ||
| 116 | + { | ||
| 117 | + label: '大于25岁', | ||
| 118 | + value: 1 | ||
| 119 | + }, | ||
| 120 | + { | ||
| 121 | + label: '小于25岁', | ||
| 122 | + value: 2 | ||
| 123 | + } | ||
| 124 | + ], | ||
| 125 | + filterMultiple: false, | ||
| 126 | + filterMethod (value, row) { | ||
| 127 | + if (value === 1) { | ||
| 128 | + return row.age > 25; | ||
| 129 | + } else if (value === 2) { | ||
| 130 | + return row.age < 25; | ||
| 131 | + } | ||
| 132 | + } | ||
| 133 | + }); | ||
| 134 | + columns.push({ | ||
| 135 | + title: '地址', | ||
| 136 | + key: 'address', | ||
| 137 | + filters: [ | ||
| 138 | + { | ||
| 139 | + label: '北京', | ||
| 140 | + value: '北京' | ||
| 141 | + }, | ||
| 142 | + { | ||
| 143 | + label: '上海', | ||
| 144 | + value: '上海' | ||
| 145 | + }, | ||
| 146 | + { | ||
| 147 | + label: '深圳', | ||
| 148 | + value: '深圳' | ||
| 149 | + } | ||
| 150 | + ], | ||
| 151 | + filterMethod (value, row) { | ||
| 152 | + return row.address.indexOf(value) > -1; | ||
| 153 | + } | ||
| 154 | + }); | ||
| 155 | + return columns; | ||
| 86 | } | 156 | } |
| 87 | } | 157 | } |
| 88 | } | 158 | } |
| 89 | -</script> | 159 | -</script> |
| 160 | +</script> | ||
| 90 | \ No newline at end of file | 161 | \ No newline at end of file |
src/components/table/table-body.vue
| @@ -7,6 +7,7 @@ | @@ -7,6 +7,7 @@ | ||
| 7 | <template v-for="(row, index) in data"> | 7 | <template v-for="(row, index) in data"> |
| 8 | <table-tr | 8 | <table-tr |
| 9 | :row="row" | 9 | :row="row" |
| 10 | + :key="row._rowKey" | ||
| 10 | :prefix-cls="prefixCls" | 11 | :prefix-cls="prefixCls" |
| 11 | @mouseenter.native.stop="handleMouseIn(row._index)" | 12 | @mouseenter.native.stop="handleMouseIn(row._index)" |
| 12 | @mouseleave.native.stop="handleMouseOut(row._index)" | 13 | @mouseleave.native.stop="handleMouseOut(row._index)" |
| @@ -17,7 +18,7 @@ | @@ -17,7 +18,7 @@ | ||
| 17 | :fixed="fixed" | 18 | :fixed="fixed" |
| 18 | :prefix-cls="prefixCls" | 19 | :prefix-cls="prefixCls" |
| 19 | :row="row" | 20 | :row="row" |
| 20 | - :key="row" | 21 | + :key="column._columnKey" |
| 21 | :column="column" | 22 | :column="column" |
| 22 | :natural-index="index" | 23 | :natural-index="index" |
| 23 | :index="row._index" | 24 | :index="row._index" |
| @@ -29,7 +30,7 @@ | @@ -29,7 +30,7 @@ | ||
| 29 | </table-tr> | 30 | </table-tr> |
| 30 | <tr v-if="rowExpanded(row._index)"> | 31 | <tr v-if="rowExpanded(row._index)"> |
| 31 | <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'"> | 32 | <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'"> |
| 32 | - <Expand :key="row" :row="row" :render="expandRender" :index="row._index"></Expand> | 33 | + <Expand :key="row._rowKey" :row="row" :render="expandRender" :index="row._index"></Expand> |
| 33 | </td> | 34 | </td> |
| 34 | </tr> | 35 | </tr> |
| 35 | </template> | 36 | </template> |
src/components/table/table-head.vue
| @@ -26,7 +26,7 @@ | @@ -26,7 +26,7 @@ | ||
| 26 | <div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple"> | 26 | <div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple"> |
| 27 | <div :class="[prefixCls + '-filter-list-item']"> | 27 | <div :class="[prefixCls + '-filter-list-item']"> |
| 28 | <checkbox-group v-model="column._filterChecked"> | 28 | <checkbox-group v-model="column._filterChecked"> |
| 29 | - <checkbox v-for="item in column.filters" :key="item" :label="item.value">{{ item.label }}</checkbox> | 29 | + <checkbox v-for="item in column.filters" :key="column._columnKey" :label="item.value">{{ item.label }}</checkbox> |
| 30 | </checkbox-group> | 30 | </checkbox-group> |
| 31 | </div> | 31 | </div> |
| 32 | <div :class="[prefixCls + '-filter-footer']"> | 32 | <div :class="[prefixCls + '-filter-footer']"> |
src/components/table/table.vue
| @@ -44,7 +44,7 @@ | @@ -44,7 +44,7 @@ | ||
| 44 | :styleObject="fixedTableStyle" | 44 | :styleObject="fixedTableStyle" |
| 45 | :columns="leftFixedColumns" | 45 | :columns="leftFixedColumns" |
| 46 | :obj-data="objData" | 46 | :obj-data="objData" |
| 47 | - :columns-width.sync="columnsWidth" | 47 | + :columns-width="columnsWidth" |
| 48 | :data="rebuildData"></table-head> | 48 | :data="rebuildData"></table-head> |
| 49 | </div> | 49 | </div> |
| 50 | <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody"> | 50 | <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody"> |
| @@ -95,6 +95,9 @@ | @@ -95,6 +95,9 @@ | ||
| 95 | 95 | ||
| 96 | const prefixCls = 'ivu-table'; | 96 | const prefixCls = 'ivu-table'; |
| 97 | 97 | ||
| 98 | + let rowKey = 1; | ||
| 99 | + let columnKey = 1; | ||
| 100 | + | ||
| 98 | export default { | 101 | export default { |
| 99 | name: 'Table', | 102 | name: 'Table', |
| 100 | mixins: [ Locale ], | 103 | mixins: [ Locale ], |
| @@ -562,7 +565,10 @@ | @@ -562,7 +565,10 @@ | ||
| 562 | }, | 565 | }, |
| 563 | makeData () { | 566 | makeData () { |
| 564 | let data = deepCopy(this.data); | 567 | let data = deepCopy(this.data); |
| 565 | - data.forEach((row, index) => row._index = index); | 568 | + data.forEach((row, index) => { |
| 569 | + row._index = index; | ||
| 570 | + row._rowKey = rowKey++; | ||
| 571 | + }); | ||
| 566 | return data; | 572 | return data; |
| 567 | }, | 573 | }, |
| 568 | makeDataWithSort () { | 574 | makeDataWithSort () { |
| @@ -629,6 +635,7 @@ | @@ -629,6 +635,7 @@ | ||
| 629 | 635 | ||
| 630 | columns.forEach((column, index) => { | 636 | columns.forEach((column, index) => { |
| 631 | column._index = index; | 637 | column._index = index; |
| 638 | + column._columnKey = columnKey++; | ||
| 632 | column._width = column.width ? column.width : ''; // update in handleResize() | 639 | column._width = column.width ? column.width : ''; // update in handleResize() |
| 633 | column._sortType = 'normal'; | 640 | column._sortType = 'normal'; |
| 634 | column._filterVisible = false; | 641 | column._filterVisible = false; |