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