chenhaodong / mew-iview

Commit 45e7ed7ef56c7a10772419760c5d641185778f71

Authored by 梁灏
1 parent adaeca88

update Table 

update Table
Showing 4 changed files with 109 additions and 71 deletions   Show diff stats
Inline Side-by-side
src/components/table/table-head.vue
  Show/Hide comments   View file @45e7ed7
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 </colgroup> 5 </colgroup>
6 <thead> 6 <thead>
7 <tr> 7 <tr>
8 - <th v-for="column in columns" :class="alignCls(column)"> 8 + <th v-for="(index, column) in columns" :class="alignCls(column)">
9 <div :class="cellClasses(column)"> 9 <div :class="cellClasses(column)">
10 <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template> 10 <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
11 <template v-else> 11 <template v-else>
@@ -35,8 +35,13 @@ @@ -35,8 +35,13 @@
35 </div> 35 </div>
36 <div slot="content" :class="[prefixCls + '-filter-list']" v-else> 36 <div slot="content" :class="[prefixCls + '-filter-list']" v-else>
37 <ul> 37 <ul>
38 - <li :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.lengtg}]">全部</li>  
39 - <li :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: column._filterChecked[0] === item.value}]" v-for="item in column.filters">{{ item.label }}</li> 38 + <li
  39 + :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.length}]"
  40 + @click="handleReset($index)">全部</li>
  41 + <li
  42 + :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: column._filterChecked[0] === item.value}]"
  43 + v-for="item in column.filters"
  44 + @click="handleSelect(index, item.value)">{{ item.label }}</li>
40 </ul> 45 </ul>
41 </div> 46 </div>
42 </Poptip> 47 </Poptip>
@@ -107,6 +112,9 @@ @@ -107,6 +112,9 @@
107 handleFilter (index) { 112 handleFilter (index) {
108 this.$parent.handleFilter(index); 113 this.$parent.handleFilter(index);
109 }, 114 },
  115 + handleSelect (index, value) {
  116 + this.$parent.handleFilterSelect(index, value);
  117 + },
110 handleReset (index) { 118 handleReset (index) {
111 this.$parent.handleFilterReset(index); 119 this.$parent.handleFilterReset(index);
112 }, 120 },
src/components/table/table.vue
  Show/Hide comments   View file @45e7ed7
1 <template> 1 <template>
2 - <div :class="classes" :style="styles">  
3 - <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>  
4 - <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">  
5 - <table-head  
6 - :prefix-cls="prefixCls"  
7 - :style="tableStyle"  
8 - :columns="cloneColumns"  
9 - :obj-data="objData"></table-head>  
10 - </div>  
11 - <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">  
12 - <table-body  
13 - v-ref:tbody  
14 - :prefix-cls="prefixCls"  
15 - :style="tableStyle"  
16 - :columns="cloneColumns"  
17 - :data="rebuildData"  
18 - :obj-data="objData"></table-body>  
19 - </div>  
20 - <div :class="[prefixCls + '-fixed']">  
21 - <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> 2 + <div :class="wrapClasses" :style="styles">
  3 + <div :class="classes" :style="styles">
  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">
22 <table-head 6 <table-head
23 - fixed  
24 - :prefix-cls="prefixCls"  
25 - :style="fixedTableStyle"  
26 - :columns="leftFixedColumns"  
27 - :obj-data="objData"></table-head> 7 + :prefix-cls="prefixCls"
  8 + :style="tableStyle"
  9 + :columns="cloneColumns"
  10 + :obj-data="objData"></table-head>
28 </div> 11 </div>
29 - <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body> 12 + <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
30 <table-body 13 <table-body
31 - fixed  
32 - :prefix-cls="prefixCls"  
33 - :style="fixedTableStyle"  
34 - :columns="leftFixedColumns"  
35 - :data="rebuildData"  
36 - :obj-data="objData"></table-body> 14 + v-ref:tbody
  15 + :prefix-cls="prefixCls"
  16 + :style="tableStyle"
  17 + :columns="cloneColumns"
  18 + :data="rebuildData"
  19 + :obj-data="objData"></table-body>
37 </div> 20 </div>
38 - </div>  
39 - <div :class="[prefixCls + '-fixed-right']">  
40 - <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">  
41 - <table-head  
42 - fixed  
43 - :prefix-cls="prefixCls"  
44 - :style="fixedRightTableStyle"  
45 - :columns="rightFixedColumns"  
46 - :obj-data="objData"></table-head> 21 + <div :class="[prefixCls + '-fixed']">
  22 + <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
  23 + <table-head
  24 + fixed
  25 + :prefix-cls="prefixCls"
  26 + :style="fixedTableStyle"
  27 + :columns="leftFixedColumns"
  28 + :obj-data="objData"></table-head>
  29 + </div>
  30 + <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
  31 + <table-body
  32 + fixed
  33 + :prefix-cls="prefixCls"
  34 + :style="fixedTableStyle"
  35 + :columns="leftFixedColumns"
  36 + :data="rebuildData"
  37 + :obj-data="objData"></table-body>
  38 + </div>
47 </div> 39 </div>
48 - <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>  
49 - <table-body  
50 - fixed  
51 - :prefix-cls="prefixCls"  
52 - :style="fixedRightTableStyle"  
53 - :columns="rightFixedColumns"  
54 - :data="rebuildData"  
55 - :obj-data="objData"></table-body> 40 + <div :class="[prefixCls + '-fixed-right']">
  41 + <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
  42 + <table-head
  43 + fixed
  44 + :prefix-cls="prefixCls"
  45 + :style="fixedRightTableStyle"
  46 + :columns="rightFixedColumns"
  47 + :obj-data="objData"></table-head>
  48 + </div>
  49 + <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
  50 + <table-body
  51 + fixed
  52 + :prefix-cls="prefixCls"
  53 + :style="fixedRightTableStyle"
  54 + :columns="rightFixedColumns"
  55 + :data="rebuildData"
  56 + :obj-data="objData"></table-body>
  57 + </div>
56 </div> 58 </div>
  59 + <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
57 </div> 60 </div>
58 - <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>  
59 </div> 61 </div>
60 </template> 62 </template>
61 <script> 63 <script>
@@ -129,11 +131,18 @@ @@ -129,11 +131,18 @@
129 } 131 }
130 }, 132 },
131 computed: { 133 computed: {
  134 + wrapClasses () {
  135 + return [
  136 + `${prefixCls}-wrapper`,
  137 + {
  138 + [`${prefixCls}-hide`]: !this.ready
  139 + }
  140 + ]
  141 + },
132 classes () { 142 classes () {
133 return [ 143 return [
134 `${prefixCls}`, 144 `${prefixCls}`,
135 { 145 {
136 - [`${prefixCls}-hide`]: !this.ready,  
137 [`${prefixCls}-${this.size}`]: !!this.size, 146 [`${prefixCls}-${this.size}`]: !!this.size,
138 [`${prefixCls}-border`]: this.border, 147 [`${prefixCls}-border`]: this.border,
139 [`${prefixCls}-stripe`]: this.stripe, 148 [`${prefixCls}-stripe`]: this.stripe,
@@ -364,8 +373,15 @@ @@ -364,8 +373,15 @@
364 this.cloneColumns[index]._isFiltered = true; 373 this.cloneColumns[index]._isFiltered = true;
365 this.cloneColumns[index]._filterVisible = false; 374 this.cloneColumns[index]._filterVisible = false;
366 }, 375 },
  376 + handleFilterSelect (index, value) {
  377 + this.cloneColumns[index]._filterChecked = [value];
  378 + this.handleFilter(index);
  379 + },
367 handleFilterReset (index) { 380 handleFilterReset (index) {
368 this.cloneColumns[index]._isFiltered = false; 381 this.cloneColumns[index]._isFiltered = false;
  382 + this.cloneColumns[index]._filterVisible = false;
  383 + this.cloneColumns[index]._filterChecked = [];
  384 + this.rebuildData = this.makeData();
369 }, 385 },
370 makeData () { 386 makeData () {
371 let data = deepCopy(this.data); 387 let data = deepCopy(this.data);
src/styles/components/table.less
  Show/Hide comments   View file @45e7ed7
@@ -2,17 +2,21 @@ @@ -2,17 +2,21 @@
2 @table-select-item-prefix-cls: ~"@{table-prefix-cls}-filter-select-item"; 2 @table-select-item-prefix-cls: ~"@{table-prefix-cls}-filter-select-item";
3 3
4 .@{table-prefix-cls} { 4 .@{table-prefix-cls} {
  5 + &-wrapper{
  6 + position: relative;
  7 + border: 1px solid @border-color-base;
  8 + border-bottom: 0;
  9 + border-right: 0;
  10 + }
5 width: 100%; 11 width: 100%;
6 max-width: 100%; 12 max-width: 100%;
7 overflow: hidden; 13 overflow: hidden;
8 color: @text-color; 14 color: @text-color;
9 font-size: @font-size-small; 15 font-size: @font-size-small;
10 background-color: #fff; 16 background-color: #fff;
11 - border: 1px solid @border-color-base;  
12 - border-bottom: 0;  
13 - border-right: 0; 17 +
14 box-sizing: border-box; 18 box-sizing: border-box;
15 - position: relative; 19 + //position: relative;
16 20
17 &-hide{ 21 &-hide{
18 opacity: 0; 22 opacity: 0;
@@ -202,7 +206,6 @@ @@ -202,7 +206,6 @@
202 top: 0; 206 top: 0;
203 left: 0; 207 left: 0;
204 box-shadow: @shadow-right; 208 box-shadow: @shadow-right;
205 - //overflow-x: hidden;  
206 209
207 &::before { 210 &::before {
208 content: ''; 211 content: '';
test/routers/table.vue
  Show/Hide comments   View file @45e7ed7
@@ -9,7 +9,6 @@ @@ -9,7 +9,6 @@
9 <br> 9 <br>
10 <i-table 10 <i-table
11 width="450" 11 width="450"
12 - :height="height"  
13 stripe 12 stripe
14 border 13 border
15 highlight-row 14 highlight-row
@@ -40,6 +39,7 @@ @@ -40,6 +39,7 @@
40 { 39 {
41 type: 'selection', 40 type: 'selection',
42 width: 50, 41 width: 50,
  42 + fixed: 'left',
43 align: 'center' 43 align: 'center'
44 }, 44 },
45 { 45 {
@@ -55,15 +55,22 @@ @@ -55,15 +55,22 @@
55 width: 100, 55 width: 100,
56 filters: [ 56 filters: [
57 { 57 {
58 - label: '家',  
59 - value: 'home' 58 + label: '大于25岁',
  59 + value: 1
60 }, 60 },
61 { 61 {
62 - label: '公司',  
63 - value: 'company' 62 + label: '小于25岁',
  63 + value: 2
64 } 64 }
65 ], 65 ],
66 - filterMultiple: false 66 + filterMultiple: false,
  67 + filterMethod (value, row) {
  68 + if (value === 1) {
  69 + return row.age >= 25;
  70 + } else if (value === 2) {
  71 + return row.age < 25;
  72 + }
  73 + }
67 }, 74 },
68 { 75 {
69 title: '标签', 76 title: '标签',
@@ -128,8 +135,8 @@ @@ -128,8 +135,8 @@
128 fixed: 'right', 135 fixed: 'right',
129 width: 120, 136 width: 120,
130 render (row, column, index) { 137 render (row, column, index) {
131 - return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`  
132 -// return `<a>${row.name}</a>` 138 + return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`;
  139 + return `<a>${row.name}</a>`;
133 } 140 }
134 } 141 }
135 ], 142 ],
@@ -139,28 +146,32 @@ @@ -139,28 +146,32 @@
139 age: 25, 146 age: 25,
140 address: '北京市朝阳区', 147 address: '北京市朝阳区',
141 edit: false, 148 edit: false,
142 - tag: 'home' 149 + tag: 'home',
  150 + action: 1
143 }, 151 },
144 { 152 {
145 name: '段模', 153 name: '段模',
146 age: 21, 154 age: 21,
147 address: '北京市海淀区', 155 address: '北京市海淀区',
148 edit: false, 156 edit: false,
149 - tag: 'company' 157 + tag: 'company',
  158 + action: 2
150 }, 159 },
151 { 160 {
152 name: '刘天娇', 161 name: '刘天娇',
153 age: 27, 162 age: 27,
154 address: '北京市东城区', 163 address: '北京市东城区',
155 edit: false, 164 edit: false,
156 - tag: 'company' 165 + tag: 'company',
  166 + action: 3
157 }, 167 },
158 { 168 {
159 name: '胡国伟', 169 name: '胡国伟',
160 age: 22, 170 age: 22,
161 address: '北京市西城区', 171 address: '北京市西城区',
162 edit: false, 172 edit: false,
163 - tag: 'home' 173 + tag: 'home',
  174 + action: 4
164 } 175 }
165 ], 176 ],
166 height: 200 177 height: 200