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 2 <div :class="classes">
3 3 <template v-if="renderType === 'index'">{{naturalIndex + 1}}</template>
4 4 <template v-if="renderType === 'selection'">
5   - <Checkbox :checked="checked" @on-change="toggleSelect">{{checked}}</Checkbox>
  5 + <Checkbox :checked="checked" @on-change="toggleSelect"></Checkbox>
6 6 </template>
7 7 <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
8 8 </div>
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @642299b
... ... @@ -14,6 +14,16 @@
14 14 <i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: column._sortType === 'asc'}" @click="handleSort($index, 'asc')"></i>
15 15 <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort($index, 'desc')"></i>
16 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 27 </template>
18 28 </div>
19 29 </th>
... ... @@ -23,12 +33,13 @@
23 33 </template>
24 34 <script>
25 35 import Checkbox from '../checkbox/checkbox.vue';
  36 + import Poptip from '../poptip/poptip.vue';
26 37 import Mixin from './mixin';
27 38 import { deepCopy } from '../../utils/assist';
28 39  
29 40 export default {
30 41 mixins: [ Mixin ],
31   - components: { Checkbox },
  42 + components: { Checkbox, Poptip },
32 43 props: {
33 44 prefixCls: String,
34 45 style: Object,
... ... @@ -74,6 +85,9 @@
74 85 type = 'normal';
75 86 }
76 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 310 this.cloneColumns.forEach((col) => col._sortType = 'normal');
311 311  
312 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 335 this.cloneColumns[index]._sortType = type;
... ...
src/styles/components/table.less
  Show/Hide comments   View file @642299b
... ... @@ -10,7 +10,6 @@
10 10 border: 1px solid @border-color-base;
11 11 border-bottom: 0;
12 12 border-right: 0;
13   - //border-collapse: collapse;
14 13 box-sizing: border-box;
15 14 position: relative;
16 15  
... ... @@ -83,7 +82,7 @@
83 82 text-align: left;
84 83 text-overflow: ellipsis;
85 84 vertical-align: middle;
86   - position: relative;
  85 + //position: relative;
87 86 border-bottom: 1px solid @border-color-split;
88 87 }
89 88  
... ... @@ -135,7 +134,7 @@
135 134 }
136 135 th &-cell{
137 136 display: inline-block;
138   - position: relative;
  137 + //position: relative;
139 138 word-wrap: normal;
140 139 vertical-align: middle;
141 140 }
... ... @@ -219,7 +218,7 @@
219 218 }
220 219 &-fixed-header{
221 220 overflow: hidden;
222   - position: relative;
  221 + //position: relative;
223 222 z-index: 3;
224 223 }
225 224 &-fixed-body{
... ... @@ -231,4 +230,21 @@
231 230 &-sort{
232 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 251 \ No newline at end of file
... ...
test/routers/table.vue
  Show/Hide comments   View file @642299b
... ... @@ -8,7 +8,8 @@
8 8 <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
9 9 <br>
10 10 <i-table
11   - width="550"
  11 + width="450"
  12 + :height="height"
12 13 stripe
13 14 border
14 15 highlight-row
... ... @@ -38,7 +39,8 @@
38 39 columns: [
39 40 {
40 41 type: 'selection',
41   - width: 150
  42 + width: 50,
  43 + align: 'center'
42 44 },
43 45 {
44 46 type: 'index',
... ... @@ -50,15 +52,54 @@
50 52 align: 'left',
51 53 fixed: 'left',
52 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 87 title: '年龄',
57 88 key: 'age',
58 89 align: 'right',
59 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 103 // render (row) {
63 104 // return `<i-button>${row.age}</i-button>`
64 105 // }
... ... @@ -93,25 +134,29 @@
93 134 name: '梁灏',
94 135 age: 25,
95 136 address: '北京市朝阳区',
96   - edit: false
  137 + edit: false,
  138 + tag: 'home'
97 139 },
98 140 {
99 141 name: '段模',
100 142 age: 21,
101 143 address: '北京市海淀区',
102   - edit: false
  144 + edit: false,
  145 + tag: 'company'
103 146 },
104 147 {
105 148 name: '刘天娇',
106 149 age: 27,
107 150 address: '北京市东城区',
108   - edit: false
  151 + edit: false,
  152 + tag: 'company'
109 153 },
110 154 {
111 155 name: '胡国伟',
112 156 age: 22,
113 157 address: '北京市西城区',
114   - edit: false
  158 + edit: false,
  159 + tag: 'home'
115 160 }
116 161 ],
117 162 height: 200
... ...