chenhaodong / mew-iview

Commit 642299b9b8d3e85499e32ebb26a2574a3e0a8319

Authored by 梁灏
1 parent 35ad3764

update Table 

update Table
Showing 5 changed files with 110 additions and 33 deletions   Show diff stats
Inline Side-by-side
src/components/table/cell.vue
  Show/Hide comments   View file @642299b
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <div :class="classes"> 2 <div :class="classes">
3 <template v-if="renderType === 'index'">{{naturalIndex + 1}}</template> 3 <template v-if="renderType === 'index'">{{naturalIndex + 1}}</template>
4 <template v-if="renderType === 'selection'"> 4 <template v-if="renderType === 'selection'">
5 - <Checkbox :checked="checked" @on-change="toggleSelect">{{checked}}</Checkbox> 5 + <Checkbox :checked="checked" @on-change="toggleSelect"></Checkbox>
6 </template> 6 </template>
7 <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template> 7 <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
8 </div> 8 </div>
src/components/table/table-head.vue
  Show/Hide comments   View file @642299b
@@ -14,6 +14,16 @@ @@ -14,6 +14,16 @@
14 <i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: column._sortType === 'asc'}" @click="handleSort($index, 'asc')"></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> 15 <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort($index, 'desc')"></i>
16 </span> 16 </span>
  17 + <Poptip v-if="column.filters" placement="bottom-end">
  18 + <span :class="[prefixCls + '-filter']">
  19 + <i class="ivu-icon ivu-icon-chevron-down" @click="handleFilter($index)"></i>
  20 + </span>
  21 + <div slot="content">
  22 + <ul>
  23 + <li v-for="item in column.filters"><Checkbox>{{ item.label }}</Checkbox></li>
  24 + </ul>
  25 + </div>
  26 + </Poptip>
17 </template> 27 </template>
18 </div> 28 </div>
19 </th> 29 </th>
@@ -23,12 +33,13 @@ @@ -23,12 +33,13 @@
23 </template> 33 </template>
24 <script> 34 <script>
25 import Checkbox from '../checkbox/checkbox.vue'; 35 import Checkbox from '../checkbox/checkbox.vue';
  36 + import Poptip from '../poptip/poptip.vue';
26 import Mixin from './mixin'; 37 import Mixin from './mixin';
27 import { deepCopy } from '../../utils/assist'; 38 import { deepCopy } from '../../utils/assist';
28 39
29 export default { 40 export default {
30 mixins: [ Mixin ], 41 mixins: [ Mixin ],
31 - components: { Checkbox }, 42 + components: { Checkbox, Poptip },
32 props: { 43 props: {
33 prefixCls: String, 44 prefixCls: String,
34 style: Object, 45 style: Object,
@@ -74,6 +85,9 @@ @@ -74,6 +85,9 @@
74 type = 'normal'; 85 type = 'normal';
75 } 86 }
76 this.$parent.handleSort(index, type); 87 this.$parent.handleSort(index, type);
  88 + },
  89 + handleFilter (index) {
  90 +
77 } 91 }
78 } 92 }
79 } 93 }
src/components/table/table.vue
  Show/Hide comments   View file @642299b
@@ -310,24 +310,26 @@ @@ -310,24 +310,26 @@
310 this.cloneColumns.forEach((col) => col._sortType = 'normal'); 310 this.cloneColumns.forEach((col) => col._sortType = 'normal');
311 311
312 const key = this.cloneColumns[index].key; 312 const key = this.cloneColumns[index].key;
313 - if (type === 'asc') {  
314 - this.rebuildData.sort((a, b) => {  
315 - if (this.cloneColumns[index].sortMethod) {  
316 - return this.cloneColumns[index].sortMethod(a, b);  
317 - } else {  
318 - return a[key] > b[key];  
319 - }  
320 - });  
321 - } else if (type === 'desc') {  
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 - });  
329 - } else if (type === 'normal') {  
330 - this.rebuildData = this.makeData(); 313 + if (this.cloneColumns[index].sortable !== 'custom') { // custom is for remote sort
  314 + if (type === 'asc') {
  315 + this.rebuildData.sort((a, b) => {
  316 + if (this.cloneColumns[index].sortMethod) {
  317 + return this.cloneColumns[index].sortMethod(a, b);
  318 + } else {
  319 + return a[key] > b[key];
  320 + }
  321 + });
  322 + } else if (type === 'desc') {
  323 + this.rebuildData.sort((a, b) => {
  324 + if (this.cloneColumns[index].sortMethod) {
  325 + return this.cloneColumns[index].sortMethod(a, b);
  326 + } else {
  327 + return a[key] < b[key];
  328 + }
  329 + });
  330 + } else if (type === 'normal') {
  331 + this.rebuildData = this.makeData();
  332 + }
331 } 333 }
332 334
333 this.cloneColumns[index]._sortType = type; 335 this.cloneColumns[index]._sortType = type;
src/styles/components/table.less
  Show/Hide comments   View file @642299b
@@ -10,7 +10,6 @@ @@ -10,7 +10,6 @@
10 border: 1px solid @border-color-base; 10 border: 1px solid @border-color-base;
11 border-bottom: 0; 11 border-bottom: 0;
12 border-right: 0; 12 border-right: 0;
13 - //border-collapse: collapse;  
14 box-sizing: border-box; 13 box-sizing: border-box;
15 position: relative; 14 position: relative;
16 15
@@ -83,7 +82,7 @@ @@ -83,7 +82,7 @@
83 text-align: left; 82 text-align: left;
84 text-overflow: ellipsis; 83 text-overflow: ellipsis;
85 vertical-align: middle; 84 vertical-align: middle;
86 - position: relative; 85 + //position: relative;
87 border-bottom: 1px solid @border-color-split; 86 border-bottom: 1px solid @border-color-split;
88 } 87 }
89 88
@@ -135,7 +134,7 @@ @@ -135,7 +134,7 @@
135 } 134 }
136 th &-cell{ 135 th &-cell{
137 display: inline-block; 136 display: inline-block;
138 - position: relative; 137 + //position: relative;
139 word-wrap: normal; 138 word-wrap: normal;
140 vertical-align: middle; 139 vertical-align: middle;
141 } 140 }
@@ -219,7 +218,7 @@ @@ -219,7 +218,7 @@
219 } 218 }
220 &-fixed-header{ 219 &-fixed-header{
221 overflow: hidden; 220 overflow: hidden;
222 - position: relative; 221 + //position: relative;
223 z-index: 3; 222 z-index: 3;
224 } 223 }
225 &-fixed-body{ 224 &-fixed-body{
@@ -231,4 +230,21 @@ @@ -231,4 +230,21 @@
231 &-sort{ 230 &-sort{
232 .sortable(); 231 .sortable();
233 } 232 }
  233 + &-filter{
  234 + display: inline-block;
  235 + cursor: pointer;
  236 + position: relative;
  237 +
  238 + i{
  239 + color: @btn-disable-color;
  240 + transition: color @transition-time @ease-in-out;
  241 + &:hover{
  242 + color: inherit;
  243 + }
  244 + }
  245 + }
  246 + .ivu-poptip-popper{
  247 + min-width: 0;
  248 + text-align: left;
  249 + }
234 } 250 }
235 \ No newline at end of file 251 \ No newline at end of file
test/routers/table.vue
  Show/Hide comments   View file @642299b
@@ -8,7 +8,8 @@ @@ -8,7 +8,8 @@
8 <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>--> 8 <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
9 <br> 9 <br>
10 <i-table 10 <i-table
11 - width="550" 11 + width="450"
  12 + :height="height"
12 stripe 13 stripe
13 border 14 border
14 highlight-row 15 highlight-row
@@ -38,7 +39,8 @@ @@ -38,7 +39,8 @@
38 columns: [ 39 columns: [
39 { 40 {
40 type: 'selection', 41 type: 'selection',
41 - width: 150 42 + width: 50,
  43 + align: 'center'
42 }, 44 },
43 { 45 {
44 type: 'index', 46 type: 'index',
@@ -50,15 +52,54 @@ @@ -50,15 +52,54 @@
50 align: 'left', 52 align: 'left',
51 fixed: 'left', 53 fixed: 'left',
52 sortable: true, 54 sortable: true,
53 - width: 100 55 + width: 100,
  56 + filters: [
  57 + {
  58 + label: '家',
  59 + value: 'home'
  60 + },
  61 + {
  62 + label: '公司',
  63 + value: 'company'
  64 + }
  65 + ],
  66 + },
  67 + {
  68 + title: '标签',
  69 + key: 'tag',
  70 + width: 100,
  71 + filters: [
  72 + {
  73 + label: '家',
  74 + value: 'home'
  75 + },
  76 + {
  77 + label: '公司',
  78 + value: 'company'
  79 + }
  80 + ],
  81 + render (row) {
  82 + const type = `${row.tag}` === 'home' ? 'green' : 'red';
  83 + return `<tag color="${type}">${row.tag}</tag>`;
  84 + }
54 }, 85 },
55 { 86 {
56 title: '年龄', 87 title: '年龄',
57 key: 'age', 88 key: 'age',
58 align: 'right', 89 align: 'right',
59 // fixed: 'left', 90 // fixed: 'left',
60 - sortable: true,  
61 - width: 100 91 + sortable: 'custom',
  92 + width: 100,
  93 + filters: [
  94 + {
  95 + label: '家',
  96 + value: 'home'
  97 + },
  98 + {
  99 + label: '公司',
  100 + value: 'company'
  101 + }
  102 + ],
62 // render (row) { 103 // render (row) {
63 // return `<i-button>${row.age}</i-button>` 104 // return `<i-button>${row.age}</i-button>`
64 // } 105 // }
@@ -93,25 +134,29 @@ @@ -93,25 +134,29 @@
93 name: '梁灏', 134 name: '梁灏',
94 age: 25, 135 age: 25,
95 address: '北京市朝阳区', 136 address: '北京市朝阳区',
96 - edit: false 137 + edit: false,
  138 + tag: 'home'
97 }, 139 },
98 { 140 {
99 name: '段模', 141 name: '段模',
100 age: 21, 142 age: 21,
101 address: '北京市海淀区', 143 address: '北京市海淀区',
102 - edit: false 144 + edit: false,
  145 + tag: 'company'
103 }, 146 },
104 { 147 {
105 name: '刘天娇', 148 name: '刘天娇',
106 age: 27, 149 age: 27,
107 address: '北京市东城区', 150 address: '北京市东城区',
108 - edit: false 151 + edit: false,
  152 + tag: 'company'
109 }, 153 },
110 { 154 {
111 name: '胡国伟', 155 name: '胡国伟',
112 age: 22, 156 age: 22,
113 address: '北京市西城区', 157 address: '北京市西城区',
114 - edit: false 158 + edit: false,
  159 + tag: 'home'
115 } 160 }
116 ], 161 ],
117 height: 200 162 height: 200