chenhaodong / 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
package.json
  Show/Hide comments   View file @224a3ae
1 1 {
2 2 "name": "iview",
3   - "version": "0.9.9-rc-2",
  3 + "version": "0.9.9-rc-3",
4 4 "title": "iView",
5 5 "description": "A high quality UI components Library with Vue.js",
6 6 "homepage": "http://www.iviewui.com",
... ...
src/components/table/mixin.js
  Show/Hide comments   View file @224a3ae
... ... @@ -11,8 +11,16 @@ export default {
11 11 isPopperShow (column) {
12 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 27 \ No newline at end of file
... ...
src/components/table/table-body.vue
  Show/Hide comments   View file @224a3ae
1 1 <template>
2 2 <table cellspacing="0" cellpadding="0" border="0" :style="style">
3 3 <colgroup>
4   - <col v-for="item in setCellWidth" :width="setCellWidth($index)">
  4 + <col v-for="column in columns" :width="setCellWidth(column, $index)">
5 5 </colgroup>
6 6 <tbody :class="[prefixCls + '-tbody']">
7 7 <tr
... ... @@ -37,7 +37,7 @@
37 37 columns: Array,
38 38 data: Array, // rebuildData
39 39 objData: Object,
40   - columnsWidth: Array,
  40 + columnsWidth: Object,
41 41 fixed: {
42 42 type: [Boolean, String],
43 43 default: false
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @224a3ae
1 1 <template>
2 2 <table cellspacing="0" cellpadding="0" border="0" :style="style">
3 3 <colgroup>
4   - <col v-for="item in setCellWidth" :width="setCellWidth($index)">
  4 + <col v-for="column in columns" :width="setCellWidth(column, $index)">
5 5 </colgroup>
6 6 <thead>
7 7 <tr>
... ... @@ -69,7 +69,7 @@
69 69 columns: Array,
70 70 objData: Object,
71 71 data: Array, // rebuildData
72   - columnsWidth: Array,
  72 + columnsWidth: Object,
73 73 fixed: {
74 74 type: [Boolean, String],
75 75 default: false
... ...
src/components/table/table.vue
  Show/Hide comments   View file @224a3ae
... ... @@ -8,7 +8,7 @@
8 8 :style="tableStyle"
9 9 :columns="cloneColumns"
10 10 :obj-data="objData"
11   - :columns-width.sync="columnsWidth"
  11 + :columns-width="columnsWidth"
12 12 :data="rebuildData"></table-head>
13 13 </div>
14 14 <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
... ... @@ -18,7 +18,7 @@
18 18 :style="tableStyle"
19 19 :columns="cloneColumns"
20 20 :data="rebuildData"
21   - :columns-width.sync="columnsWidth"
  21 + :columns-width="columnsWidth"
22 22 :obj-data="objData"></table-body>
23 23 </div>
24 24 <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle">
... ... @@ -39,7 +39,7 @@
39 39 :style="fixedTableStyle"
40 40 :columns="leftFixedColumns"
41 41 :data="rebuildData"
42   - :columns-width.sync="columnsWidth"
  42 + :columns-width="columnsWidth"
43 43 :obj-data="objData"></table-body>
44 44 </div>
45 45 </div>
... ... @@ -61,7 +61,7 @@
61 61 :style="fixedRightTableStyle"
62 62 :columns="rightFixedColumns"
63 63 :data="rebuildData"
64   - :columns-width.sync="columnsWidth"
  64 + :columns-width="columnsWidth"
65 65 :obj-data="objData"></table-body>
66 66 </div>
67 67 </div>
... ... @@ -128,7 +128,7 @@
128 128 return {
129 129 ready: false,
130 130 tableWidth: 0,
131   - columnsWidth: [],
  131 + columnsWidth: {},
132 132 prefixCls: prefixCls,
133 133 compiledUids: [],
134 134 objData: this.makeObjData(), // checkbox or highlight-row
... ... @@ -176,7 +176,7 @@
176 176 let style = {};
177 177 let width = 0;
178 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 181 style.width = `${width}px`;
182 182 return style;
... ... @@ -185,7 +185,7 @@
185 185 let style = {};
186 186 let width = 0;
187 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 190 style.width = `${width}px`;
191 191 return style;
... ... @@ -231,25 +231,35 @@
231 231 },
232 232 handleResize () {
233 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 235 if (allWidth) {
236 236 this.tableWidth = this.columns.map(cell => cell.width).reduce((a, b) => a + b);
237 237 } else {
238 238 this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
239 239 }
  240 + this.columnsWidth = {};
240 241 this.$nextTick(() => {
241   - this.columnsWidth = [];
  242 + let columnsWidth = {};
242 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 246 const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td');
246 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 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 474  
465 475 columns.forEach((column, index) => {
466 476 column._index = index;
  477 + column._width = column.width ? column.width : ''; // update in handleResize()
467 478 column._sortType = 'normal';
468 479 column._filterVisible = false;
469 480 column._isFiltered = false;
... ...
test/routers/table.vue
  Show/Hide comments   View file @224a3ae
1 1 <template>
2   - <i-table :columns="columns1" :data="data1"></i-table>
  2 + <i-table border :columns="columns1" :data="data1"></i-table>
3 3 </template>
4 4 <script>
5 5 export default {
... ... @@ -12,7 +12,9 @@
12 12 },
13 13 {
14 14 title: '年龄',
15   - key: 'age'
  15 + key: 'age',
  16 + fixed: 'left',
  17 +// width: 200
16 18 },
17 19 {
18 20 title: '地址',
... ... @@ -44,4 +46,4 @@
44 46 }
45 47 }
46 48 }
47 49 -</script>
  50 +</script>
48 51 \ No newline at end of file
... ...