drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

publish 0.9.9-rc-3

Browse source 
fixed Table width bug when resize window
This commit is contained in:
梁灏 2016-11-30 16:12:10 +08:00
parent 5e7a3b293b
commit 224a3ae539
6 changed files with 44 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "iview", "name": "iview",
"version": "0.9.9-rc-2", "version": "0.9.9-rc-3",
"title": "iView", "title": "iView",
"description": "A high quality UI components Library with Vue.js", "description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com", "homepage": "http://www.iviewui.com",

12
src/components/table/mixin.js
View file

@ -11,8 +11,16 @@ export default {
isPopperShow (column) { isPopperShow (column) {
return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right')); return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
}, },
setCellWidth (index) { setCellWidth (column, index) {
return this.column[index].width ? this.column.width : this.columnsWidth[index]; // return column.width ? column.width : this.columnsWidth[index];
let width = '';
if (column.width) {
width = column.width;
} else if (this.columnsWidth[column._index]) {
width = this.columnsWidth[column._index].width
}
// return this.columnsWidth[column._index] ? this.columnsWidth[column._index].width : '';
return width;
} }
} }
} }

4
src/components/table/table-body.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<table cellspacing="0" cellpadding="0" border="0" :style="style"> <table cellspacing="0" cellpadding="0" border="0" :style="style">
<colgroup> <colgroup>
<col v-for="item in setCellWidth" :width="setCellWidth($index)"> <col v-for="column in columns" :width="setCellWidth(column, $index)">
</colgroup> </colgroup>
<tbody :class="[prefixCls + '-tbody']"> <tbody :class="[prefixCls + '-tbody']">
<tr <tr
@ -37,7 +37,7 @@
columns: Array, columns: Array,
data: Array, // rebuildData data: Array, // rebuildData
objData: Object, objData: Object,
columnsWidth: Array, columnsWidth: Object,
fixed: { fixed: {
type: [Boolean, String], type: [Boolean, String],
default: false default: false

4
src/components/table/table-head.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<table cellspacing="0" cellpadding="0" border="0" :style="style"> <table cellspacing="0" cellpadding="0" border="0" :style="style">
<colgroup> <colgroup>
<col v-for="item in setCellWidth" :width="setCellWidth($index)"> <col v-for="column in columns" :width="setCellWidth(column, $index)">
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
@ -69,7 +69,7 @@
columns: Array, columns: Array,
objData: Object, objData: Object,
data: Array, // rebuildData data: Array, // rebuildData
columnsWidth: Array, columnsWidth: Object,
fixed: { fixed: {
type: [Boolean, String], type: [Boolean, String],
default: false default: false

37
src/components/table/table.vue
View file

@ -8,7 +8,7 @@
:style="tableStyle" :style="tableStyle"
:columns="cloneColumns" :columns="cloneColumns"
:obj-data="objData" :obj-data="objData"
:columns-width.sync="columnsWidth" :columns-width="columnsWidth"
:data="rebuildData"></table-head> :data="rebuildData"></table-head>
</div> </div>
<div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll"> <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
@ -18,7 +18,7 @@
:style="tableStyle" :style="tableStyle"
:columns="cloneColumns" :columns="cloneColumns"
:data="rebuildData" :data="rebuildData"
:columns-width.sync="columnsWidth" :columns-width="columnsWidth"
:obj-data="objData"></table-body> :obj-data="objData"></table-body>
</div> </div>
<div :class="[prefixCls + '-fixed']" :style="fixedTableStyle"> <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle">
@ -39,7 +39,7 @@
:style="fixedTableStyle" :style="fixedTableStyle"
:columns="leftFixedColumns" :columns="leftFixedColumns"
:data="rebuildData" :data="rebuildData"
:columns-width.sync="columnsWidth" :columns-width="columnsWidth"
:obj-data="objData"></table-body> :obj-data="objData"></table-body>
</div> </div>
</div> </div>
@ -61,7 +61,7 @@
:style="fixedRightTableStyle" :style="fixedRightTableStyle"
:columns="rightFixedColumns" :columns="rightFixedColumns"
:data="rebuildData" :data="rebuildData"
:columns-width.sync="columnsWidth" :columns-width="columnsWidth"
:obj-data="objData"></table-body> :obj-data="objData"></table-body>
</div> </div>
</div> </div>
@ -128,7 +128,7 @@
return { return {
ready: false, ready: false,
tableWidth: 0, tableWidth: 0,
columnsWidth: [], columnsWidth: {},
prefixCls: prefixCls, prefixCls: prefixCls,
compiledUids: [], compiledUids: [],
objData: this.makeObjData(), // checkbox or highlight-row objData: this.makeObjData(), // checkbox or highlight-row
@ -176,7 +176,7 @@
let style = {}; let style = {};
let width = 0; let width = 0;
this.leftFixedColumns.forEach((col) => { this.leftFixedColumns.forEach((col) => {
if (col.fixed && col.fixed === 'left') width += col.width; if (col.fixed && col.fixed === 'left') width += col._width;
}); });
style.width = `${width}px`; style.width = `${width}px`;
return style; return style;
@ -185,7 +185,7 @@
let style = {}; let style = {};
let width = 0; let width = 0;
this.rightFixedColumns.forEach((col) => { this.rightFixedColumns.forEach((col) => {
if (col.fixed && col.fixed === 'right') width += col.width; if (col.fixed && col.fixed === 'right') width += col._width;
}); });
style.width = `${width}px`; style.width = `${width}px`;
return style; return style;
@ -231,25 +231,35 @@
}, },
handleResize () { handleResize () {
this.$nextTick(() => { this.$nextTick(() => {
const allWidth = !this.columns.some(cell => !cell.width); const allWidth = !this.columns.some(cell => !cell.width); // each column set a width
if (allWidth) { if (allWidth) {
this.tableWidth = this.columns.map(cell => cell.width).reduce((a, b) => a + b); this.tableWidth = this.columns.map(cell => cell.width).reduce((a, b) => a + b);
} else { } else {
this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1; this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
} }
this.columnsWidth = {};
this.$nextTick(() => { this.$nextTick(() => {
this.columnsWidth = []; let columnsWidth = {};
let autoWidthIndex = -1; let autoWidthIndex = -1;
if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width); if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);//todo 这行可能有问题
const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td'); const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td');
for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox
const column = this.cloneColumns[i];
let width = parseInt(getStyle($td[i], 'width'));
if (i === autoWidthIndex) { if (i === autoWidthIndex) {
this.columnsWidth.push(parseInt(getStyle($td[i], 'width')) - 1); width = parseInt(getStyle($td[i], 'width')) - 1;
} else { }
this.columnsWidth.push(parseInt(getStyle($td[i], 'width'))); if (column.width) width = column.width;
this.cloneColumns[i]._width = width;
columnsWidth[column._index] = {
width: width
} }
} }
this.columnsWidth = columnsWidth;
}); });
}); });
}, },
@ -464,6 +474,7 @@
columns.forEach((column, index) => { columns.forEach((column, index) => {
column._index = index; column._index = index;
column._width = column.width ? column.width : ''; // update in handleResize()
column._sortType = 'normal'; column._sortType = 'normal';
column._filterVisible = false; column._filterVisible = false;
column._isFiltered = false; column._isFiltered = false;

8
test/routers/table.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<i-table :columns="columns1" :data="data1"></i-table> <i-table border :columns="columns1" :data="data1"></i-table>
</template> </template>
<script> <script>
export default { export default {
@ -12,7 +12,9 @@
}, },
{ {
title: '年龄', title: '年龄',
key: 'age' key: 'age',
fixed: 'left',
// width: 200
}, },
{ {
title: '地址', title: '地址',
@ -44,4 +46,4 @@
} }
} }
} }
</script> </script>