other / mew-iview

Commit 35ad37642d24d1d555999fa5cd8e54fbbab5994a

Authored by 梁灏
1 parent 731d69a2

update Table 

update Table
Showing 3 changed files with 77 additions and 54 deletions   Show diff stats
Inline Side-by-side
src/components/table/table-head.vue
  Show/Hide comments   View file @35ad376
... ... @@ -11,8 +11,8 @@
11 11 <template v-else>
12 12 {{{ renderHeader(column, $index) }}}
13 13 <span :class="[prefixCls + '-sort']" v-if="column.sortable">
14   - <i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: sortType === 'asc'}" @click="handleSortAsc($index)"></i>
15   - <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: sortType === 'desc'}" @click="handleSortDesc($index)"></i>
  14 + <i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: column._sortType === 'asc'}" @click="handleSort($index, 'asc')"></i>
  15 + <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort($index, 'desc')"></i>
16 16 </span>
17 17 </template>
18 18 </div>
... ... @@ -36,11 +36,6 @@
36 36 objData: Object,
37 37 fixed: Boolean
38 38 },
39   - data () {
40   - return {
41   - sortType: 'normal'
42   - }
43   - },
44 39 computed: {
45 40 isSelectAll () {
46 41 let isSelectAll = true;
... ... @@ -74,23 +69,11 @@
74 69 const status = !this.isSelectAll;
75 70 this.$parent.selectAll(status);
76 71 },
77   - handleSortAsc (index) {
78   - if (this.sortType === 'asc') {
79   - this.sortType = 'normal';
80   - this.$parent.handleSort(index, 'normal');
81   - } else {
82   - this.sortType = 'asc';
83   - this.$parent.handleSort(index, 'asc');
84   - }
85   - },
86   - handleSortDesc (index) {
87   - if (this.sortType === 'desc') {
88   - this.sortType = 'normal';
89   - this.$parent.handleSort(index, 'normal');
90   - } else {
91   - this.sortType = 'desc';
92   - this.$parent.handleSort(index, 'desc');
  72 + handleSort (index, type) {
  73 + if (this.columns[index]._sortType === type) {
  74 + type = 'normal';
93 75 }
  76 + this.$parent.handleSort(index, type);
94 77 }
95 78 }
96 79 }
... ...
src/components/table/table.vue
  Show/Hide comments   View file @35ad376
1 1 <template>
2   - {{objData|json}}
3 2 <div :class="classes" :style="styles">
4 3 <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
5 4 <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
... ... @@ -120,12 +119,9 @@
120 119 columnsWidth: [],
121 120 prefixCls: prefixCls,
122 121 compiledUids: [],
123   - objData: this.makeObjData(),
  122 + objData: this.makeObjData(), // checkbox or highlight-row
124 123 rebuildData: this.makeData(), // for sort or filter
125   - cloneColumns: deepCopy(this.columns),
126   - leftFixedColumns: [],
127   - rightFixedColumns: [],
128   - centerColumns: [],
  124 + cloneColumns: this.makeColumns(),
129 125 showSlotHeader: true,
130 126 showSlotFooter: true,
131 127 bodyHeight: 0
... ... @@ -175,6 +171,24 @@
175 171 let style = {};
176 172 if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`;
177 173 return style;
  174 + },
  175 + leftFixedColumns () {
  176 + let left = [];
  177 + this.cloneColumns.forEach((col) => {
  178 + if (col.fixed && col.fixed === 'left') {
  179 + left.push(col);
  180 + }
  181 + });
  182 + return left;
  183 + },
  184 + rightFixedColumns () {
  185 + let right = [];
  186 + this.cloneColumns.forEach((col) => {
  187 + if (col.fixed && col.fixed === 'right') {
  188 + right.push(col);
  189 + }
  190 + });
  191 + return right;
178 192 }
179 193 },
180 194 methods: {
... ... @@ -277,24 +291,6 @@
277 291 })
278 292 }
279 293 },
280   - parseColumns () {
281   - let left = [];
282   - let right = [];
283   - let center = [];
284   - this.cloneColumns.forEach((col) => {
285   - if (col.fixed && col.fixed === 'left') {
286   - left.push(col);
287   - } else if (col.fixed && col.fixed === 'right') {
288   - right.push(col);
289   - } else {
290   - center.push(col);
291   - }
292   - });
293   - this.leftFixedColumns = left;
294   - this.rightFixedColumns = right;
295   - this.centerColumns = center;
296   - this.cloneColumns = left.concat(center).concat(right);
297   - },
298 294 handleBodyScroll (event) {
299 295 if (this.showHeader) this.$els.header.scrollLeft = event.target.scrollLeft;
300 296 if (this.leftFixedColumns.length) this.$els.fixedBody.scrollTop = event.target.scrollTop;
... ... @@ -311,15 +307,36 @@
311 307 }
312 308 },
313 309 handleSort (index, type) {
  310 + this.cloneColumns.forEach((col) => col._sortType = 'normal');
  311 +
  312 + const key = this.cloneColumns[index].key;
314 313 if (type === 'asc') {
315 314 this.rebuildData.sort((a, b) => {
316   - return a.age > b.age;
317   - })
  315 + if (this.cloneColumns[index].sortMethod) {
  316 + return this.cloneColumns[index].sortMethod(a, b);
  317 + } else {
  318 + return a[key] > b[key];
  319 + }
  320 + });
318 321 } else if (type === 'desc') {
319   -
  322 + this.rebuildData.sort((a, b) => {
  323 + if (this.cloneColumns[index].sortMethod) {
  324 + return this.cloneColumns[index].sortMethod(a, b);
  325 + } else {
  326 + return a[key] < b[key];
  327 + }
  328 + });
320 329 } else if (type === 'normal') {
321 330 this.rebuildData = this.makeData();
322 331 }
  332 +
  333 + this.cloneColumns[index]._sortType = type;
  334 +
  335 + this.$emit('on-sort-change', {
  336 + column: JSON.parse(JSON.stringify(this.columns[this.cloneColumns[index]._index])),
  337 + key: key,
  338 + order: type
  339 + })
323 340 },
324 341 makeData () {
325 342 let data = deepCopy(this.data);
... ... @@ -336,10 +353,29 @@
336 353 data[index] = newRow;
337 354 });
338 355 return data;
  356 + },
  357 + makeColumns () {
  358 + let columns = deepCopy(this.columns);
  359 + let left = [];
  360 + let right = [];
  361 + let center = [];
  362 +
  363 + columns.forEach((column, index) => {
  364 + column._sortType = 'normal';
  365 + column._index = index;
  366 +
  367 + if (column.fixed && column.fixed === 'left') {
  368 + left.push(column);
  369 + } else if (column.fixed && column.fixed === 'right') {
  370 + right.push(column);
  371 + } else {
  372 + center.push(column);
  373 + }
  374 + });
  375 + return left.concat(center).concat(right);
339 376 }
340 377 },
341 378 compiled () {
342   - this.parseColumns();
343 379 this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
344 380 this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
345 381 },
... ... @@ -362,8 +398,7 @@
362 398 },
363 399 columns: {
364 400 handler () {
365   - this.cloneColumns = deepCopy(this.columns);
366   - this.parseColumns();
  401 + this.cloneColumns = this.makeColumns();
367 402 this.handleResize();
368 403 },
369 404 deep: true
... ...
test/routers/table.vue
  Show/Hide comments   View file @35ad376
... ... @@ -19,7 +19,8 @@
19 19 @on-current-change="current"
20 20 @on-select="select"
21 21 @on-selection-change="schange"
22   - @on-select-all="sall">
  22 + @on-select-all="sall"
  23 + @on-sort-change="sortChange">
23 24 <!--<div slot="header">表格标题</div>-->
24 25 <!--<div slot="footer">表格标题</div>-->
25 26 </i-table>
... ... @@ -48,6 +49,7 @@
48 49 key: 'name',
49 50 align: 'left',
50 51 fixed: 'left',
  52 + sortable: true,
51 53 width: 100
52 54 },
53 55 {
... ... @@ -146,6 +148,9 @@
146 148 } else {
147 149 return '';
148 150 }
  151 + },
  152 + sortChange (data) {
  153 + console.log(data)
149 154 }
150 155 },
151 156 ready () {
... ...