other / mew-iview

Commit 5d0499ce1ede84320d4bb00324378036fa52c68e

Authored by 梁灏
1 parent 24b20146

update Table 

update Table
Showing 7 changed files with 80 additions and 29 deletions   Show diff stats
Inline Side-by-side
src/components/table/cell.vue
  Show/Hide comments   View file @5d0499c
@@ -19,7 +19,10 @@ @@ -19,7 +19,10 @@
19 naturalIndex: Number, // index of rebuildData 19 naturalIndex: Number, // index of rebuildData
20 index: Number, // _index of data 20 index: Number, // _index of data
21 checked: Boolean, 21 checked: Boolean,
22 - fixed: Boolean 22 + fixed: {
  23 + type: [Boolean, String],
  24 + default: false
  25 + }
23 }, 26 },
24 data () { 27 data () {
25 return { 28 return {
src/components/table/mixin.js
  Show/Hide comments   View file @5d0499c
1 export default { 1 export default {
2 methods: { 2 methods: {
3 alignCls (column) { 3 alignCls (column) {
4 - return column.align ? `${this.prefixCls}-column-${column.align}` : ''; 4 + return [
  5 + {
  6 + [`${this.prefixCls}-column-${column.align}`]: column.align,
  7 + [`${this.prefixCls}-hidden`]: (this.fixed === 'left' && column.fixed !== 'left') || (this.fixed === 'right' && column.fixed !== 'right') || (!this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'))
  8 + }
  9 + ]
  10 + },
  11 + isPopperShow (column) {
  12 + return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
5 } 13 }
6 } 14 }
7 } 15 }
8 \ No newline at end of file 16 \ No newline at end of file
src/components/table/table-body.vue
  Show/Hide comments   View file @5d0499c
@@ -37,7 +37,10 @@ @@ -37,7 +37,10 @@
37 columns: Array, 37 columns: Array,
38 data: Array, // rebuildData 38 data: Array, // rebuildData
39 objData: Object, 39 objData: Object,
40 - fixed: Boolean 40 + fixed: {
  41 + type: [Boolean, String],
  42 + default: false
  43 + }
41 }, 44 },
42 methods: { 45 methods: {
43 rowClasses (_index) { 46 rowClasses (_index) {
src/components/table/table-head.vue
  Show/Hide comments   View file @5d0499c
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
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 17 <Poptip
18 - v-if="column.filters && (fixed || (!fixed && !column.fixed))" 18 + v-if="isPopperShow(column)"
19 :visible.sync="column._filterVisible" 19 :visible.sync="column._filterVisible"
20 placement="bottom" 20 placement="bottom"
21 @on-popper-hide="handleFilterHide($index)"> 21 @on-popper-hide="handleFilterHide($index)">
@@ -69,7 +69,10 @@ @@ -69,7 +69,10 @@
69 columns: Array, 69 columns: Array,
70 objData: Object, 70 objData: Object,
71 data: Array, // rebuildData 71 data: Array, // rebuildData
72 - fixed: Boolean 72 + fixed: {
  73 + type: [Boolean, String],
  74 + default: false
  75 + }
73 }, 76 },
74 computed: { 77 computed: {
75 isSelectAll () { 78 isSelectAll () {
src/components/table/table.vue
  Show/Hide comments   View file @5d0499c
@@ -19,10 +19,10 @@ @@ -19,10 +19,10 @@
19 :data="rebuildData" 19 :data="rebuildData"
20 :obj-data="objData"></table-body> 20 :obj-data="objData"></table-body>
21 </div> 21 </div>
22 - <div :class="[prefixCls + '-fixed']"> 22 + <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle">
23 <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> 23 <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
24 <table-head 24 <table-head
25 - fixed 25 + fixed="left"
26 :prefix-cls="prefixCls" 26 :prefix-cls="prefixCls"
27 :style="fixedTableStyle" 27 :style="fixedTableStyle"
28 :columns="leftFixedColumns" 28 :columns="leftFixedColumns"
@@ -31,7 +31,7 @@ @@ -31,7 +31,7 @@
31 </div> 31 </div>
32 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body> 32 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
33 <table-body 33 <table-body
34 - fixed 34 + fixed="left"
35 :prefix-cls="prefixCls" 35 :prefix-cls="prefixCls"
36 :style="fixedTableStyle" 36 :style="fixedTableStyle"
37 :columns="leftFixedColumns" 37 :columns="leftFixedColumns"
@@ -39,10 +39,10 @@ @@ -39,10 +39,10 @@
39 :obj-data="objData"></table-body> 39 :obj-data="objData"></table-body>
40 </div> 40 </div>
41 </div> 41 </div>
42 - <div :class="[prefixCls + '-fixed-right']"> 42 + <div :class="[prefixCls + '-fixed-right']" :style="fixedRightTableStyle">
43 <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> 43 <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
44 <table-head 44 <table-head
45 - fixed 45 + fixed="right"
46 :prefix-cls="prefixCls" 46 :prefix-cls="prefixCls"
47 :style="fixedRightTableStyle" 47 :style="fixedRightTableStyle"
48 :columns="rightFixedColumns" 48 :columns="rightFixedColumns"
@@ -51,7 +51,7 @@ @@ -51,7 +51,7 @@
51 </div> 51 </div>
52 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body> 52 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
53 <table-body 53 <table-body
54 - fixed 54 + fixed="right"
55 :prefix-cls="prefixCls" 55 :prefix-cls="prefixCls"
56 :style="fixedRightTableStyle" 56 :style="fixedRightTableStyle"
57 :columns="rightFixedColumns" 57 :columns="rightFixedColumns"
@@ -126,7 +126,7 @@ @@ -126,7 +126,7 @@
126 prefixCls: prefixCls, 126 prefixCls: prefixCls,
127 compiledUids: [], 127 compiledUids: [],
128 objData: this.makeObjData(), // checkbox or highlight-row 128 objData: this.makeObjData(), // checkbox or highlight-row
129 - rebuildData: this.makeData(), // for sort or filter 129 + rebuildData: [], // for sort or filter
130 cloneColumns: this.makeColumns(), 130 cloneColumns: this.makeColumns(),
131 showSlotHeader: true, 131 showSlotHeader: true,
132 showSlotFooter: true, 132 showSlotFooter: true,
@@ -168,12 +168,20 @@ @@ -168,12 +168,20 @@
168 }, 168 },
169 fixedTableStyle () { 169 fixedTableStyle () {
170 let style = {}; 170 let style = {};
171 - if (this.leftFixedColumns.length) style.width = this.leftFixedColumns.reduce((a, b) => a + b); 171 + let width = 0;
  172 + this.leftFixedColumns.forEach((col) => {
  173 + if (col.fixed && col.fixed === 'left') width += col.width;
  174 + });
  175 + style.width = `${width}px`;
172 return style; 176 return style;
173 }, 177 },
174 fixedRightTableStyle () { 178 fixedRightTableStyle () {
175 let style = {}; 179 let style = {};
176 - if (this.rightFixedColumns.length) style.width = this.rightFixedColumns.reduce((a, b) => a + b); 180 + let width = 0;
  181 + this.rightFixedColumns.forEach((col) => {
  182 + if (col.fixed && col.fixed === 'right') width += col.width;
  183 + });
  184 + style.width = `${width}px`;
177 return style; 185 return style;
178 }, 186 },
179 bodyStyle () { 187 bodyStyle () {
@@ -188,21 +196,27 @@ @@ -188,21 +196,27 @@
188 }, 196 },
189 leftFixedColumns () { 197 leftFixedColumns () {
190 let left = []; 198 let left = [];
  199 + let other = [];
191 this.cloneColumns.forEach((col) => { 200 this.cloneColumns.forEach((col) => {
192 if (col.fixed && col.fixed === 'left') { 201 if (col.fixed && col.fixed === 'left') {
193 left.push(col); 202 left.push(col);
  203 + } else {
  204 + other.push(col);
194 } 205 }
195 }); 206 });
196 - return left; 207 + return left.concat(other);
197 }, 208 },
198 rightFixedColumns () { 209 rightFixedColumns () {
199 let right = []; 210 let right = [];
  211 + let other = [];
200 this.cloneColumns.forEach((col) => { 212 this.cloneColumns.forEach((col) => {
201 if (col.fixed && col.fixed === 'right') { 213 if (col.fixed && col.fixed === 'right') {
202 right.push(col); 214 right.push(col);
  215 + } else {
  216 + other.push(col);
203 } 217 }
204 }); 218 });
205 - return right; 219 + return right.concat(other);
206 } 220 }
207 }, 221 },
208 methods: { 222 methods: {
@@ -457,6 +471,10 @@ @@ -457,6 +471,10 @@
457 } else { 471 } else {
458 column._filterMultiple = true; 472 column._filterMultiple = true;
459 } 473 }
  474 + if ('filteredValue' in column) {
  475 + column._filterChecked = column.filteredValue;
  476 + column._isFiltered = true;
  477 + }
460 478
461 if (column.fixed && column.fixed === 'left') { 479 if (column.fixed && column.fixed === 'left') {
462 left.push(column); 480 left.push(column);
@@ -472,6 +490,7 @@ @@ -472,6 +490,7 @@
472 compiled () { 490 compiled () {
473 this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== ''; 491 this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
474 this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== ''; 492 this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
  493 + this.rebuildData = this.makeDataWithSortAndFilter();
475 }, 494 },
476 ready () { 495 ready () {
477 this.handleResize(); 496 this.handleResize();
src/styles/components/table.less
  Show/Hide comments   View file @5d0499c
@@ -206,7 +206,6 @@ @@ -206,7 +206,6 @@
206 position: absolute; 206 position: absolute;
207 top: 0; 207 top: 0;
208 left: 0; 208 left: 0;
209 - //box-shadow: @shadow-right;  
210 box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2); 209 box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
211 210
212 &::before { 211 &::before {
@@ -224,13 +223,10 @@ @@ -224,13 +223,10 @@
224 top: 0; 223 top: 0;
225 left: auto; 224 left: auto;
226 right: 0; 225 right: 0;
227 - //box-shadow: @shadow-left;  
228 box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2); 226 box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
229 } 227 }
230 &-fixed-header{ 228 &-fixed-header{
231 overflow: hidden; 229 overflow: hidden;
232 - //position: relative;  
233 - //z-index: 3;  
234 } 230 }
235 &-fixed-body{ 231 &-fixed-body{
236 overflow: hidden; 232 overflow: hidden;
test/routers/table.vue
  Show/Hide comments   View file @5d0499c
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
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="450" 11 + width="850"
12 :height="height" 12 :height="height"
13 stripe 13 stripe
14 :border="true" 14 :border="true"
@@ -40,8 +40,8 @@ @@ -40,8 +40,8 @@
40 columns: [ 40 columns: [
41 { 41 {
42 type: 'selection', 42 type: 'selection',
43 - width: 50,  
44 - fixed: 'left', 43 + width: 90,
  44 +// fixed: 'left',
45 align: 'center' 45 align: 'center'
46 }, 46 },
47 { 47 {
@@ -52,7 +52,7 @@ @@ -52,7 +52,7 @@
52 title: '姓名', 52 title: '姓名',
53 key: 'name', 53 key: 'name',
54 align: 'left', 54 align: 'left',
55 - fixed: 'left', 55 +// fixed: 'left',
56 sortable: true, 56 sortable: true,
57 width: 100, 57 width: 100,
58 filters: [ 58 filters: [
@@ -91,6 +91,7 @@ @@ -91,6 +91,7 @@
91 filterMethod (value, row) { 91 filterMethod (value, row) {
92 return row.tag === value; 92 return row.tag === value;
93 }, 93 },
  94 +// filteredValue: ['company'],
94 render (row) { 95 render (row) {
95 const type = `${row.tag}` === 'home' ? 'green' : 'red'; 96 const type = `${row.tag}` === 'home' ? 'green' : 'red';
96 return `<tag color="${type}">${row.tag}</tag>`; 97 return `<tag color="${type}">${row.tag}</tag>`;
@@ -129,7 +130,7 @@ @@ -129,7 +130,7 @@
129 title: '地址', 130 title: '地址',
130 key: 'address', 131 key: 'address',
131 align: 'center', 132 align: 'center',
132 -// fixed: 'right', 133 +// fixed: 'left',
133 width: 100, 134 width: 100,
134 // render (row, column, index) { 135 // render (row, column, index) {
135 // if (row.edit) { 136 // if (row.edit) {
@@ -142,17 +143,35 @@ @@ -142,17 +143,35 @@
142 { 143 {
143 title: '操作', 144 title: '操作',
144 key: 'action', 145 key: 'action',
145 - fixed: 'right',  
146 - width: 120, 146 +// fixed: 'right',
  147 + width: 250,
147 render (row, column, index) { 148 render (row, column, index) {
148 return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`; 149 return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`;
149 - return `<a>${row.name}</a>`; 150 +// return `<a href="#">${row.name}</a>`;
  151 + },
  152 + filters: [
  153 + {
  154 + label: '两个字',
  155 + value: 1
  156 + },
  157 + {
  158 + label: '三个字',
  159 + value: 2
  160 + }
  161 + ],
  162 + filterMultiple: false,
  163 + filterMethod (value, row) {
  164 + if (value === 1) {
  165 + return row.name.length == 2;
  166 + } else if (value === 2) {
  167 + return row.name.length == 3;
  168 + }
150 } 169 }
151 } 170 }
152 ], 171 ],
153 data: [ 172 data: [
154 { 173 {
155 - name: '梁灏', 174 + name: '梁灏梁灏梁灏梁灏梁灏梁灏梁灏',
156 age: 25, 175 age: 25,
157 address: '北京市朝阳区', 176 address: '北京市朝阳区',
158 edit: false, 177 edit: false,