chenhaodong / mew-iview

Commit d3dfdb2618c972b31dcafac69f383d3a57637943

Authored by 梁灏
1 parent 741b987a

update Table 

update Table
Showing 4 changed files with 76 additions and 91 deletions   Show diff stats
Inline Side-by-side
src/components/table/table-body.vue
  Show/Hide comments   View file @d3dfdb2
... ... @@ -6,10 +6,10 @@
6 6 <tbody :class="[prefixCls + '-tbody']">
7 7 <tr
8 8 v-for="(index, row) in data"
9   - :class="rowClasses(index, row._index)"
10   - @mouseenter.stop="handleMouseIn(index)"
11   - @mouseleave.stop="handleMouseOut(index)"
12   - @click.stop="highlightCurrentRow(index)">
  9 + :class="rowClasses(row._index)"
  10 + @mouseenter.stop="handleMouseIn(row._index)"
  11 + @mouseleave.stop="handleMouseOut(row._index)"
  12 + @click.stop="highlightCurrentRow(row._index)">
13 13 <td v-for="column in columns" :class="alignCls(column)">
14 14 <Cell
15 15 :fixed="fixed"
... ... @@ -18,7 +18,7 @@
18 18 :column="column"
19 19 :natural-index="index"
20 20 :index="row._index"
21   - :checked="rowChecked(index, row._index)"></Cell>
  21 + :checked="rowChecked(row._index)"></Cell>
22 22 </td>
23 23 </tr>
24 24 </tbody>
... ... @@ -36,40 +36,37 @@
36 36 style: Object,
37 37 columns: Array,
38 38 data: Array, // rebuildData
39   - cloneData: Array,
40 39 objData: Object,
41 40 fixed: Boolean
42 41 },
43 42 methods: {
44   - rowClasses (index, _index) {
  43 + rowClasses (_index) {
45 44 return [
46 45 `${this.prefixCls}-row`,
47 46 this.rowClsName(_index),
48 47 {
49   - [`${this.prefixCls}-row-highlight`]: this.cloneData[index] && this.cloneData[index]._isHighlight,
50   - [`${this.prefixCls}-row-hover`]: this.cloneData[index] && this.cloneData[index]._isHover
  48 + [`${this.prefixCls}-row-highlight`]: this.objData[_index]._isHighlight,
  49 + [`${this.prefixCls}-row-hover`]: this.objData[_index]._isHover
51 50 }
52 51 ]
53 52 },
54   - rowChecked (index, _index) {
55   -// const data = this.cloneData.filter(row => row._index === _index);
56   -// return data && data._isChecked;
  53 + rowChecked (_index) {
57 54 return this.objData[_index]._isChecked;
58 55 },
59 56 setCellWidth (column, index) {
60 57 return this.$parent.setCellWidth(column, index);
61 58 },
62   - rowClsName (index) {
63   - return this.$parent.rowClassName(this.cloneData[index], index);
  59 + rowClsName (_index) {
  60 + return this.$parent.rowClassName(this.objData[_index], _index);
64 61 },
65   - handleMouseIn (index) {
66   - this.$parent.handleMouseIn(index);
  62 + handleMouseIn (_index) {
  63 + this.$parent.handleMouseIn(_index);
67 64 },
68   - handleMouseOut (index) {
69   - this.$parent.handleMouseOut(index);
  65 + handleMouseOut (_index) {
  66 + this.$parent.handleMouseOut(_index);
70 67 },
71   - highlightCurrentRow (index) {
72   - this.$parent.highlightCurrentRow(index);
  68 + highlightCurrentRow (_index) {
  69 + this.$parent.highlightCurrentRow(_index);
73 70 }
74 71 }
75 72 }
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @d3dfdb2
... ... @@ -33,7 +33,7 @@
33 33 prefixCls: String,
34 34 style: Object,
35 35 columns: Array,
36   - cloneData: Array,
  36 + objData: Object,
37 37 fixed: Boolean
38 38 },
39 39 data () {
... ... @@ -43,7 +43,12 @@
43 43 },
44 44 computed: {
45 45 isSelectAll () {
46   - return !this.cloneData.some(data => !data._isChecked);
  46 + let isSelectAll = true;
  47 + for (let i in this.objData) {
  48 + if (!this.objData[i]._isChecked) isSelectAll = false;
  49 + }
  50 +
  51 + return isSelectAll;
47 52 }
48 53 },
49 54 methods: {
... ...
src/components/table/table.vue
  Show/Hide comments   View file @d3dfdb2
1 1 <template>
2   - {{cloneData|json}}
  2 + {{objData|json}}
3 3 <div :class="classes" :style="styles">
4 4 <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
5 5 <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
... ... @@ -7,7 +7,7 @@
7 7 :prefix-cls="prefixCls"
8 8 :style="tableStyle"
9 9 :columns="cloneColumns"
10   - :clone-data="cloneData"></table-head>
  10 + :obj-data="objData"></table-head>
11 11 </div>
12 12 <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
13 13 <table-body
... ... @@ -16,8 +16,7 @@
16 16 :style="tableStyle"
17 17 :columns="cloneColumns"
18 18 :data="rebuildData"
19   - :obj-data="objData"
20   - :clone-data="cloneData"></table-body>
  19 + :obj-data="objData"></table-body>
21 20 </div>
22 21 <div :class="[prefixCls + '-fixed']">
23 22 <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
... ... @@ -26,7 +25,7 @@
26 25 :prefix-cls="prefixCls"
27 26 :style="fixedTableStyle"
28 27 :columns="leftFixedColumns"
29   - :clone-data="cloneData"></table-head>
  28 + :obj-data="objData"></table-head>
30 29 </div>
31 30 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
32 31 <table-body
... ... @@ -35,8 +34,7 @@
35 34 :style="fixedTableStyle"
36 35 :columns="leftFixedColumns"
37 36 :data="rebuildData"
38   - :obj-data="objData"
39   - :clone-data="cloneData"></table-body>
  37 + :obj-data="objData"></table-body>
40 38 </div>
41 39 </div>
42 40 <div :class="[prefixCls + '-fixed-right']">
... ... @@ -46,7 +44,7 @@
46 44 :prefix-cls="prefixCls"
47 45 :style="fixedRightTableStyle"
48 46 :columns="rightFixedColumns"
49   - :clone-data="cloneData"></table-head>
  47 + :obj-data="objData"></table-head>
50 48 </div>
51 49 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
52 50 <table-body
... ... @@ -55,8 +53,7 @@
55 53 :style="fixedRightTableStyle"
56 54 :columns="rightFixedColumns"
57 55 :data="rebuildData"
58   - :obj-data="objData"
59   - :clone-data="cloneData"></table-body>
  56 + :obj-data="objData"></table-body>
60 57 </div>
61 58 </div>
62 59 <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
... ... @@ -123,7 +120,7 @@
123 120 columnsWidth: [],
124 121 prefixCls: prefixCls,
125 122 compiledUids: [],
126   - cloneData: this.makeData(),
  123 + objData: this.makeObjData(),
127 124 rebuildData: this.makeData(), // for sort or filter
128 125 cloneColumns: deepCopy(this.columns),
129 126 leftFixedColumns: [],
... ... @@ -178,13 +175,6 @@
178 175 let style = {};
179 176 if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`;
180 177 return style;
181   - },
182   - objData () {
183   - let objData = {};
184   - this.cloneData.forEach((data) => {
185   - objData[data._index] = data;
186   - });
187   - return objData;
188 178 }
189 179 },
190 180 methods: {
... ... @@ -218,63 +208,47 @@
218 208 setCellWidth (column, index) {
219 209 return column.width ? column.width : this.columnsWidth[index];
220 210 },
221   - assignRow (index, obj) {
222   - return Object.assign({}, this.cloneData[index], obj);
  211 + handleMouseIn (_index) {
  212 + if (this.objData[_index]._isHover) return;
  213 + this.objData[_index]._isHover = true;
223 214 },
224   - handleMouseIn (index) {
225   - if (this.cloneData[index]._isHover) return;
226   - const row = this.assignRow(index, {
227   - _isHover: true
228   - });
229   - this.cloneData.$set(index, row);
230   - },
231   - handleMouseOut (index) {
232   - const row = this.assignRow(index, {
233   - _isHover: false
234   - });
235   - this.cloneData.$set(index, row);
  215 + handleMouseOut (_index) {
  216 + this.objData[_index]._isHover = false;
236 217 },
237   - highlightCurrentRow (index) {
238   - if (!this.highlightRow || this.cloneData[index]._isHighlight) return;
  218 + highlightCurrentRow (_index) {
  219 + if (!this.highlightRow || this.objData[_index]._isHighlight) return;
239 220  
240 221 let oldIndex = -1;
241   - this.cloneData.forEach((item, index) => {
242   - if (item._isHighlight) {
243   - oldIndex = index;
244   - item._isHighlight = false;
245   - return true;
  222 + for (let i in this.objData) {
  223 + if (this.objData[i]._isHighlight) {
  224 + oldIndex = parseInt(i);
  225 + this.objData[i]._isHighlight = false;
246 226 }
247   - });
248   - const row = this.assignRow(index, {
249   - _isHighlight: true
250   - });
251   - this.cloneData.$set(index, row);
252   -
253   - const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.data[this.rebuildData[oldIndex]._index]));
254   - this.$emit('on-current-change', JSON.parse(JSON.stringify(this.data[this.rebuildData[index]._index])), oldData);
  227 + }
  228 + this.objData[_index]._isHighlight = true;
  229 + const oldData = oldIndex < 0 ? null : JSON.parse(JSON.stringify(this.data[oldIndex]));
  230 + this.$emit('on-current-change', JSON.parse(JSON.stringify(this.data[_index])), oldData);
255 231 },
256 232 getSelection () {
257 233 let selectionIndexes = [];
258   - this.cloneData.forEach((data) => {
259   - if (data._isChecked) selectionIndexes.push(data._index);
260   - });
  234 + for (let i in this.objData) {
  235 + if (this.objData[i]._isChecked) selectionIndexes.push(parseInt(i));
  236 + }
261 237 return JSON.parse(JSON.stringify(this.data.filter((data, index) => selectionIndexes.indexOf(index) > -1)));
262 238 },
263   - toggleSelect (_index) { // _index
  239 + toggleSelect (_index) {
264 240 let data = {};
265 241 let index = -1;
266   - for (let i = 0; i < this.cloneData.length; i++) {
267   - if (this.cloneData[i]._index === _index) {
268   - data = this.cloneData[i];
  242 +
  243 + for (let i in this.objData) {
  244 + if (parseInt(i) === _index) {
  245 + data = this.objData[i];
269 246 index = i;
270   - break;
271 247 }
272 248 }
273 249 const status = !data._isChecked;
274   - const row = this.assignRow(index, {
275   - _isChecked: status
276   - });
277   - this.cloneData.$set(index, row);
  250 +
  251 + this.objData[_index]._isChecked = status;
278 252  
279 253 const selection = this.getSelection();
280 254 if (status) {
... ... @@ -283,11 +257,9 @@
283 257 this.$emit('on-selection-change', selection);
284 258 },
285 259 selectAll (status) {
286   - let tmpData = deepCopy(this.cloneData);
287   - tmpData.forEach((data) => {
288   - data._isChecked = status;
289   - });
290   - this.cloneData = tmpData;
  260 + for (let i in this.objData) {
  261 + this.objData[i]._isChecked = status;
  262 + }
291 263  
292 264 const selection = this.getSelection();
293 265 if (status) {
... ... @@ -353,6 +325,17 @@
353 325 let data = deepCopy(this.data);
354 326 data.forEach((row, index) => row._index = index);
355 327 return data;
  328 + },
  329 + makeObjData () {
  330 + let data = {};
  331 + this.data.forEach((row, index) => {
  332 + const newRow = deepCopy(row);// todo 直接替换
  333 + newRow._isHover = false;
  334 + newRow._isChecked = false;
  335 + newRow._isHighlight = false;
  336 + data[index] = newRow;
  337 + });
  338 + return data;
356 339 }
357 340 },
358 341 compiled () {
... ... @@ -371,7 +354,7 @@
371 354 watch: {
372 355 data: {
373 356 handler () {
374   - this.cloneData = this.makeData();
  357 + this.objData = this.makeObjData();
375 358 this.rebuildData = this.makeData();
376 359 this.handleResize();
377 360 },
... ...
test/routers/table.vue
  Show/Hide comments   View file @d3dfdb2
... ... @@ -127,18 +127,18 @@
127 127 this.$Message.info(this.data[index].name);
128 128 },
129 129 current (newData, oldData) {
130   -// console.log(newData);
131   -// console.log(oldData);
  130 + console.log(newData);
  131 + console.log(oldData);
132 132 },
133 133 select (a,b){
134   - console.log(JSON.stringify(b));
  134 +// console.log(a);
135 135 // console.log(b);
136 136 },
137 137 schange (a) {
138 138 // console.log(a)
139 139 },
140 140 sall (a) {
141   - console.log(a)
  141 +// console.log(a)
142 142 },
143 143 rowClsName (row, index) {
144 144 if (index == 1) {
... ...