chenhaodong / mew-iview

Commit 68b308ee837b8f9e0a7ab7d8a8bfdecba8bada2d

Authored by 梁灏
1 parent 82d90c4f

fixex #1353

Showing 4 changed files with 131 additions and 53 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @68b308e
1 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 21 </template>
4 22 <script>
5   - import etable from '../components/table.vue';
6   - import test from '../components/test.vue';
7 23 export default {
8 24 data () {
9 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 52 name: '王小明',
57 53 age: 18,
58 54 address: '北京市朝阳区芍药居',
... ... @@ -60,7 +56,7 @@
60 56 },
61 57 {
62 58 name: '张小刚',
63   - age: 25,
  59 + age: 24,
64 60 address: '北京市海淀区西二旗',
65 61 date: '2016-10-01'
66 62 },
... ... @@ -75,15 +71,89 @@
75 71 age: 26,
76 72 address: '深圳市南山区深南大道',
77 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 159 -</script>
  160 +</script>
90 161 \ No newline at end of file
... ...
src/components/table/table-body.vue
  Show/Hide comments   View file @68b308e
... ... @@ -7,6 +7,7 @@
7 7 <template v-for="(row, index) in data">
8 8 <table-tr
9 9 :row="row"
  10 + :key="row._rowKey"
10 11 :prefix-cls="prefixCls"
11 12 @mouseenter.native.stop="handleMouseIn(row._index)"
12 13 @mouseleave.native.stop="handleMouseOut(row._index)"
... ... @@ -17,7 +18,7 @@
17 18 :fixed="fixed"
18 19 :prefix-cls="prefixCls"
19 20 :row="row"
20   - :key="row"
  21 + :key="column._columnKey"
21 22 :column="column"
22 23 :natural-index="index"
23 24 :index="row._index"
... ... @@ -29,7 +30,7 @@
29 30 </table-tr>
30 31 <tr v-if="rowExpanded(row._index)">
31 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 34 </td>
34 35 </tr>
35 36 </template>
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @68b308e
... ... @@ -26,7 +26,7 @@
26 26 <div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple">
27 27 <div :class="[prefixCls + '-filter-list-item']">
28 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 30 </checkbox-group>
31 31 </div>
32 32 <div :class="[prefixCls + '-filter-footer']">
... ...
src/components/table/table.vue
  Show/Hide comments   View file @68b308e
... ... @@ -44,7 +44,7 @@
44 44 :styleObject="fixedTableStyle"
45 45 :columns="leftFixedColumns"
46 46 :obj-data="objData"
47   - :columns-width.sync="columnsWidth"
  47 + :columns-width="columnsWidth"
48 48 :data="rebuildData"></table-head>
49 49 </div>
50 50 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody">
... ... @@ -95,6 +95,9 @@
95 95  
96 96 const prefixCls = 'ivu-table';
97 97  
  98 + let rowKey = 1;
  99 + let columnKey = 1;
  100 +
98 101 export default {
99 102 name: 'Table',
100 103 mixins: [ Locale ],
... ... @@ -562,7 +565,10 @@
562 565 },
563 566 makeData () {
564 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 572 return data;
567 573 },
568 574 makeDataWithSort () {
... ... @@ -629,6 +635,7 @@
629 635  
630 636 columns.forEach((column, index) => {
631 637 column._index = index;
  638 + column._columnKey = columnKey++;
632 639 column._width = column.width ? column.width : ''; // update in handleResize()
633 640 column._sortType = 'normal';
634 641 column._filterVisible = false;
... ...