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,10 +6,10 @@
6 <tbody :class="[prefixCls + '-tbody']"> 6 <tbody :class="[prefixCls + '-tbody']">
7 <tr 7 <tr
8 v-for="(index, row) in data" 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 <td v-for="column in columns" :class="alignCls(column)"> 13 <td v-for="column in columns" :class="alignCls(column)">
14 <Cell 14 <Cell
15 :fixed="fixed" 15 :fixed="fixed"
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 :column="column" 18 :column="column"
19 :natural-index="index" 19 :natural-index="index"
20 :index="row._index" 20 :index="row._index"
21 - :checked="rowChecked(index, row._index)"></Cell> 21 + :checked="rowChecked(row._index)"></Cell>
22 </td> 22 </td>
23 </tr> 23 </tr>
24 </tbody> 24 </tbody>
@@ -36,40 +36,37 @@ @@ -36,40 +36,37 @@
36 style: Object, 36 style: Object,
37 columns: Array, 37 columns: Array,
38 data: Array, // rebuildData 38 data: Array, // rebuildData
39 - cloneData: Array,  
40 objData: Object, 39 objData: Object,
41 fixed: Boolean 40 fixed: Boolean
42 }, 41 },
43 methods: { 42 methods: {
44 - rowClasses (index, _index) { 43 + rowClasses (_index) {
45 return [ 44 return [
46 `${this.prefixCls}-row`, 45 `${this.prefixCls}-row`,
47 this.rowClsName(_index), 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 return this.objData[_index]._isChecked; 54 return this.objData[_index]._isChecked;
58 }, 55 },
59 setCellWidth (column, index) { 56 setCellWidth (column, index) {
60 return this.$parent.setCellWidth(column, index); 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,7 +33,7 @@
33 prefixCls: String, 33 prefixCls: String,
34 style: Object, 34 style: Object,
35 columns: Array, 35 columns: Array,
36 - cloneData: Array, 36 + objData: Object,
37 fixed: Boolean 37 fixed: Boolean
38 }, 38 },
39 data () { 39 data () {
@@ -43,7 +43,12 @@ @@ -43,7 +43,12 @@
43 }, 43 },
44 computed: { 44 computed: {
45 isSelectAll () { 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 methods: { 54 methods: {
src/components/table/table.vue
  Show/Hide comments   View file @d3dfdb2
1 <template> 1 <template>
2 - {{cloneData|json}} 2 + {{objData|json}}
3 <div :class="classes" :style="styles"> 3 <div :class="classes" :style="styles">
4 <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div> 4 <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
5 <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel"> 5 <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
@@ -7,7 +7,7 @@ @@ -7,7 +7,7 @@
7 :prefix-cls="prefixCls" 7 :prefix-cls="prefixCls"
8 :style="tableStyle" 8 :style="tableStyle"
9 :columns="cloneColumns" 9 :columns="cloneColumns"
10 - :clone-data="cloneData"></table-head> 10 + :obj-data="objData"></table-head>
11 </div> 11 </div>
12 <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll"> 12 <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
13 <table-body 13 <table-body
@@ -16,8 +16,7 @@ @@ -16,8 +16,7 @@
16 :style="tableStyle" 16 :style="tableStyle"
17 :columns="cloneColumns" 17 :columns="cloneColumns"
18 :data="rebuildData" 18 :data="rebuildData"
19 - :obj-data="objData"  
20 - :clone-data="cloneData"></table-body> 19 + :obj-data="objData"></table-body>
21 </div> 20 </div>
22 <div :class="[prefixCls + '-fixed']"> 21 <div :class="[prefixCls + '-fixed']">
23 <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> 22 <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
@@ -26,7 +25,7 @@ @@ -26,7 +25,7 @@
26 :prefix-cls="prefixCls" 25 :prefix-cls="prefixCls"
27 :style="fixedTableStyle" 26 :style="fixedTableStyle"
28 :columns="leftFixedColumns" 27 :columns="leftFixedColumns"
29 - :clone-data="cloneData"></table-head> 28 + :obj-data="objData"></table-head>
30 </div> 29 </div>
31 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body> 30 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
32 <table-body 31 <table-body
@@ -35,8 +34,7 @@ @@ -35,8 +34,7 @@
35 :style="fixedTableStyle" 34 :style="fixedTableStyle"
36 :columns="leftFixedColumns" 35 :columns="leftFixedColumns"
37 :data="rebuildData" 36 :data="rebuildData"
38 - :obj-data="objData"  
39 - :clone-data="cloneData"></table-body> 37 + :obj-data="objData"></table-body>
40 </div> 38 </div>
41 </div> 39 </div>
42 <div :class="[prefixCls + '-fixed-right']"> 40 <div :class="[prefixCls + '-fixed-right']">
@@ -46,7 +44,7 @@ @@ -46,7 +44,7 @@
46 :prefix-cls="prefixCls" 44 :prefix-cls="prefixCls"
47 :style="fixedRightTableStyle" 45 :style="fixedRightTableStyle"
48 :columns="rightFixedColumns" 46 :columns="rightFixedColumns"
49 - :clone-data="cloneData"></table-head> 47 + :obj-data="objData"></table-head>
50 </div> 48 </div>
51 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body> 49 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
52 <table-body 50 <table-body
@@ -55,8 +53,7 @@ @@ -55,8 +53,7 @@
55 :style="fixedRightTableStyle" 53 :style="fixedRightTableStyle"
56 :columns="rightFixedColumns" 54 :columns="rightFixedColumns"
57 :data="rebuildData" 55 :data="rebuildData"
58 - :obj-data="objData"  
59 - :clone-data="cloneData"></table-body> 56 + :obj-data="objData"></table-body>
60 </div> 57 </div>
61 </div> 58 </div>
62 <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div> 59 <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
@@ -123,7 +120,7 @@ @@ -123,7 +120,7 @@
123 columnsWidth: [], 120 columnsWidth: [],
124 prefixCls: prefixCls, 121 prefixCls: prefixCls,
125 compiledUids: [], 122 compiledUids: [],
126 - cloneData: this.makeData(), 123 + objData: this.makeObjData(),
127 rebuildData: this.makeData(), // for sort or filter 124 rebuildData: this.makeData(), // for sort or filter
128 cloneColumns: deepCopy(this.columns), 125 cloneColumns: deepCopy(this.columns),
129 leftFixedColumns: [], 126 leftFixedColumns: [],
@@ -178,13 +175,6 @@ @@ -178,13 +175,6 @@
178 let style = {}; 175 let style = {};
179 if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`; 176 if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`;
180 return style; 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 methods: { 180 methods: {
@@ -218,63 +208,47 @@ @@ -218,63 +208,47 @@
218 setCellWidth (column, index) { 208 setCellWidth (column, index) {
219 return column.width ? column.width : this.columnsWidth[index]; 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 let oldIndex = -1; 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 getSelection () { 232 getSelection () {
257 let selectionIndexes = []; 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 return JSON.parse(JSON.stringify(this.data.filter((data, index) => selectionIndexes.indexOf(index) > -1))); 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 let data = {}; 240 let data = {};
265 let index = -1; 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 index = i; 246 index = i;
270 - break;  
271 } 247 }
272 } 248 }
273 const status = !data._isChecked; 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 const selection = this.getSelection(); 253 const selection = this.getSelection();
280 if (status) { 254 if (status) {
@@ -283,11 +257,9 @@ @@ -283,11 +257,9 @@
283 this.$emit('on-selection-change', selection); 257 this.$emit('on-selection-change', selection);
284 }, 258 },
285 selectAll (status) { 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 const selection = this.getSelection(); 264 const selection = this.getSelection();
293 if (status) { 265 if (status) {
@@ -353,6 +325,17 @@ @@ -353,6 +325,17 @@
353 let data = deepCopy(this.data); 325 let data = deepCopy(this.data);
354 data.forEach((row, index) => row._index = index); 326 data.forEach((row, index) => row._index = index);
355 return data; 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 compiled () { 341 compiled () {
@@ -371,7 +354,7 @@ @@ -371,7 +354,7 @@
371 watch: { 354 watch: {
372 data: { 355 data: {
373 handler () { 356 handler () {
374 - this.cloneData = this.makeData(); 357 + this.objData = this.makeObjData();
375 this.rebuildData = this.makeData(); 358 this.rebuildData = this.makeData();
376 this.handleResize(); 359 this.handleResize();
377 }, 360 },
test/routers/table.vue
  Show/Hide comments   View file @d3dfdb2
@@ -127,18 +127,18 @@ @@ -127,18 +127,18 @@
127 this.$Message.info(this.data[index].name); 127 this.$Message.info(this.data[index].name);
128 }, 128 },
129 current (newData, oldData) { 129 current (newData, oldData) {
130 -// console.log(newData);  
131 -// console.log(oldData); 130 + console.log(newData);
  131 + console.log(oldData);
132 }, 132 },
133 select (a,b){ 133 select (a,b){
134 - console.log(JSON.stringify(b)); 134 +// console.log(a);
135 // console.log(b); 135 // console.log(b);
136 }, 136 },
137 schange (a) { 137 schange (a) {
138 // console.log(a) 138 // console.log(a)
139 }, 139 },
140 sall (a) { 140 sall (a) {
141 - console.log(a) 141 +// console.log(a)
142 }, 142 },
143 rowClsName (row, index) { 143 rowClsName (row, index) {
144 if (index == 1) { 144 if (index == 1) {