other / mew-iview

Commit 224a3ae5395994bc6e720f51b9e175c7cfcea9fa

Authored by 梁灏
1 parent 5e7a3b29

publish 0.9.9-rc-3 

fixed Table width bug when resize window
Showing 6 changed files with 44 additions and 23 deletions   Show diff stats
Inline Side-by-side
1 { 1 {
2 "name": "iview", 2 "name": "iview",
3 - "version": "0.9.9-rc-2", 3 + "version": "0.9.9-rc-3",
4 "title": "iView", 4 "title": "iView",
5 "description": "A high quality UI components Library with Vue.js", 5 "description": "A high quality UI components Library with Vue.js",
6 "homepage": "http://www.iviewui.com", 6 "homepage": "http://www.iviewui.com",
src/components/table/mixin.js
  Show/Hide comments   View file @224a3ae
@@ -11,8 +11,16 @@ export default { @@ -11,8 +11,16 @@ export default {
11 isPopperShow (column) { 11 isPopperShow (column) {
12 return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right')); 12 return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
13 }, 13 },
14 - setCellWidth (index) {  
15 - return this.column[index].width ? this.column.width : this.columnsWidth[index]; 14 + setCellWidth (column, index) {
  15 + // return column.width ? column.width : this.columnsWidth[index];
  16 + let width = '';
  17 + if (column.width) {
  18 + width = column.width;
  19 + } else if (this.columnsWidth[column._index]) {
  20 + width = this.columnsWidth[column._index].width
  21 + }
  22 + // return this.columnsWidth[column._index] ? this.columnsWidth[column._index].width : '';
  23 + return width;
16 } 24 }
17 } 25 }
18 } 26 }
19 \ No newline at end of file 27 \ No newline at end of file
src/components/table/table-body.vue
  Show/Hide comments   View file @224a3ae
1 <template> 1 <template>
2 <table cellspacing="0" cellpadding="0" border="0" :style="style"> 2 <table cellspacing="0" cellpadding="0" border="0" :style="style">
3 <colgroup> 3 <colgroup>
4 - <col v-for="item in setCellWidth" :width="setCellWidth($index)"> 4 + <col v-for="column in columns" :width="setCellWidth(column, $index)">
5 </colgroup> 5 </colgroup>
6 <tbody :class="[prefixCls + '-tbody']"> 6 <tbody :class="[prefixCls + '-tbody']">
7 <tr 7 <tr
@@ -37,7 +37,7 @@ @@ -37,7 +37,7 @@
37 columns: Array, 37 columns: Array,
38 data: Array, // rebuildData 38 data: Array, // rebuildData
39 objData: Object, 39 objData: Object,
40 - columnsWidth: Array, 40 + columnsWidth: Object,
41 fixed: { 41 fixed: {
42 type: [Boolean, String], 42 type: [Boolean, String],
43 default: false 43 default: false
src/components/table/table-head.vue
  Show/Hide comments   View file @224a3ae
1 <template> 1 <template>
2 <table cellspacing="0" cellpadding="0" border="0" :style="style"> 2 <table cellspacing="0" cellpadding="0" border="0" :style="style">
3 <colgroup> 3 <colgroup>
4 - <col v-for="item in setCellWidth" :width="setCellWidth($index)"> 4 + <col v-for="column in columns" :width="setCellWidth(column, $index)">
5 </colgroup> 5 </colgroup>
6 <thead> 6 <thead>
7 <tr> 7 <tr>
@@ -69,7 +69,7 @@ @@ -69,7 +69,7 @@
69 columns: Array, 69 columns: Array,
70 objData: Object, 70 objData: Object,
71 data: Array, // rebuildData 71 data: Array, // rebuildData
72 - columnsWidth: Array, 72 + columnsWidth: Object,
73 fixed: { 73 fixed: {
74 type: [Boolean, String], 74 type: [Boolean, String],
75 default: false 75 default: false
src/components/table/table.vue
  Show/Hide comments   View file @224a3ae
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 :style="tableStyle" 8 :style="tableStyle"
9 :columns="cloneColumns" 9 :columns="cloneColumns"
10 :obj-data="objData" 10 :obj-data="objData"
11 - :columns-width.sync="columnsWidth" 11 + :columns-width="columnsWidth"
12 :data="rebuildData"></table-head> 12 :data="rebuildData"></table-head>
13 </div> 13 </div>
14 <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll"> 14 <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 :style="tableStyle" 18 :style="tableStyle"
19 :columns="cloneColumns" 19 :columns="cloneColumns"
20 :data="rebuildData" 20 :data="rebuildData"
21 - :columns-width.sync="columnsWidth" 21 + :columns-width="columnsWidth"
22 :obj-data="objData"></table-body> 22 :obj-data="objData"></table-body>
23 </div> 23 </div>
24 <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle"> 24 <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle">
@@ -39,7 +39,7 @@ @@ -39,7 +39,7 @@
39 :style="fixedTableStyle" 39 :style="fixedTableStyle"
40 :columns="leftFixedColumns" 40 :columns="leftFixedColumns"
41 :data="rebuildData" 41 :data="rebuildData"
42 - :columns-width.sync="columnsWidth" 42 + :columns-width="columnsWidth"
43 :obj-data="objData"></table-body> 43 :obj-data="objData"></table-body>
44 </div> 44 </div>
45 </div> 45 </div>
@@ -61,7 +61,7 @@ @@ -61,7 +61,7 @@
61 :style="fixedRightTableStyle" 61 :style="fixedRightTableStyle"
62 :columns="rightFixedColumns" 62 :columns="rightFixedColumns"
63 :data="rebuildData" 63 :data="rebuildData"
64 - :columns-width.sync="columnsWidth" 64 + :columns-width="columnsWidth"
65 :obj-data="objData"></table-body> 65 :obj-data="objData"></table-body>
66 </div> 66 </div>
67 </div> 67 </div>
@@ -128,7 +128,7 @@ @@ -128,7 +128,7 @@
128 return { 128 return {
129 ready: false, 129 ready: false,
130 tableWidth: 0, 130 tableWidth: 0,
131 - columnsWidth: [], 131 + columnsWidth: {},
132 prefixCls: prefixCls, 132 prefixCls: prefixCls,
133 compiledUids: [], 133 compiledUids: [],
134 objData: this.makeObjData(), // checkbox or highlight-row 134 objData: this.makeObjData(), // checkbox or highlight-row
@@ -176,7 +176,7 @@ @@ -176,7 +176,7 @@
176 let style = {}; 176 let style = {};
177 let width = 0; 177 let width = 0;
178 this.leftFixedColumns.forEach((col) => { 178 this.leftFixedColumns.forEach((col) => {
179 - if (col.fixed && col.fixed === 'left') width += col.width; 179 + if (col.fixed && col.fixed === 'left') width += col._width;
180 }); 180 });
181 style.width = `${width}px`; 181 style.width = `${width}px`;
182 return style; 182 return style;
@@ -185,7 +185,7 @@ @@ -185,7 +185,7 @@
185 let style = {}; 185 let style = {};
186 let width = 0; 186 let width = 0;
187 this.rightFixedColumns.forEach((col) => { 187 this.rightFixedColumns.forEach((col) => {
188 - if (col.fixed && col.fixed === 'right') width += col.width; 188 + if (col.fixed && col.fixed === 'right') width += col._width;
189 }); 189 });
190 style.width = `${width}px`; 190 style.width = `${width}px`;
191 return style; 191 return style;
@@ -231,25 +231,35 @@ @@ -231,25 +231,35 @@
231 }, 231 },
232 handleResize () { 232 handleResize () {
233 this.$nextTick(() => { 233 this.$nextTick(() => {
234 - const allWidth = !this.columns.some(cell => !cell.width); 234 + const allWidth = !this.columns.some(cell => !cell.width); // each column set a width
235 if (allWidth) { 235 if (allWidth) {
236 this.tableWidth = this.columns.map(cell => cell.width).reduce((a, b) => a + b); 236 this.tableWidth = this.columns.map(cell => cell.width).reduce((a, b) => a + b);
237 } else { 237 } else {
238 this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1; 238 this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
239 } 239 }
  240 + this.columnsWidth = {};
240 this.$nextTick(() => { 241 this.$nextTick(() => {
241 - this.columnsWidth = []; 242 + let columnsWidth = {};
242 let autoWidthIndex = -1; 243 let autoWidthIndex = -1;
243 - if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width); 244 + if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);//todo 这行可能有问题
244 245
245 const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td'); 246 const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td');
246 for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox 247 for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox
  248 + const column = this.cloneColumns[i];
  249 +
  250 + let width = parseInt(getStyle($td[i], 'width'));
247 if (i === autoWidthIndex) { 251 if (i === autoWidthIndex) {
248 - this.columnsWidth.push(parseInt(getStyle($td[i], 'width')) - 1);  
249 - } else {  
250 - this.columnsWidth.push(parseInt(getStyle($td[i], 'width'))); 252 + width = parseInt(getStyle($td[i], 'width')) - 1;
  253 + }
  254 + if (column.width) width = column.width;
  255 +
  256 + this.cloneColumns[i]._width = width;
  257 +
  258 + columnsWidth[column._index] = {
  259 + width: width
251 } 260 }
252 } 261 }
  262 + this.columnsWidth = columnsWidth;
253 }); 263 });
254 }); 264 });
255 }, 265 },
@@ -464,6 +474,7 @@ @@ -464,6 +474,7 @@
464 474
465 columns.forEach((column, index) => { 475 columns.forEach((column, index) => {
466 column._index = index; 476 column._index = index;
  477 + column._width = column.width ? column.width : ''; // update in handleResize()
467 column._sortType = 'normal'; 478 column._sortType = 'normal';
468 column._filterVisible = false; 479 column._filterVisible = false;
469 column._isFiltered = false; 480 column._isFiltered = false;
test/routers/table.vue
  Show/Hide comments   View file @224a3ae
1 <template> 1 <template>
2 - <i-table :columns="columns1" :data="data1"></i-table> 2 + <i-table border :columns="columns1" :data="data1"></i-table>
3 </template> 3 </template>
4 <script> 4 <script>
5 export default { 5 export default {
@@ -12,7 +12,9 @@ @@ -12,7 +12,9 @@
12 }, 12 },
13 { 13 {
14 title: '年龄', 14 title: '年龄',
15 - key: 'age' 15 + key: 'age',
  16 + fixed: 'left',
  17 +// width: 200
16 }, 18 },
17 { 19 {
18 title: '地址', 20 title: '地址',
@@ -44,4 +46,4 @@ @@ -44,4 +46,4 @@
44 } 46 }
45 } 47 }
46 } 48 }
47 -</script> 49 -</script>
  50 +</script>
48 \ No newline at end of file 51 \ No newline at end of file