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",
"version": "0.9.9-rc-2",
"version": "0.9.9-rc-3",
"title": "iView",
"description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com",

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

@ -11,8 +11,16 @@ export default {
isPopperShow (column) {
return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
},
setCellWidth (index) {
return this.column[index].width ? this.column.width : this.columnsWidth[index];
setCellWidth (column, 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>
<table cellspacing="0" cellpadding="0" border="0" :style="style">
<colgroup>
<col v-for="item in setCellWidth" :width="setCellWidth($index)">
<col v-for="column in columns" :width="setCellWidth(column, $index)">
</colgroup>
<tbody :class="[prefixCls + '-tbody']">
<tr
@ -37,7 +37,7 @@
columns: Array,
data: Array, // rebuildData
objData: Object,
columnsWidth: Array,
columnsWidth: Object,
fixed: {
type: [Boolean, String],
default: false

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

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

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

@ -8,7 +8,7 @@
:style="tableStyle"
:columns="cloneColumns"
:obj-data="objData"
:columns-width.sync="columnsWidth"
:columns-width="columnsWidth"
:data="rebuildData"></table-head>
</div>
<div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
@ -18,7 +18,7 @@
:style="tableStyle"
:columns="cloneColumns"
:data="rebuildData"
:columns-width.sync="columnsWidth"
:columns-width="columnsWidth"
:obj-data="objData"></table-body>
</div>
<div :class="[prefixCls + '-fixed']" :style="fixedTableStyle">
@ -39,7 +39,7 @@
:style="fixedTableStyle"
:columns="leftFixedColumns"
:data="rebuildData"
:columns-width.sync="columnsWidth"
:columns-width="columnsWidth"
:obj-data="objData"></table-body>
</div>
</div>
@ -61,7 +61,7 @@
:style="fixedRightTableStyle"
:columns="rightFixedColumns"
:data="rebuildData"
:columns-width.sync="columnsWidth"
:columns-width="columnsWidth"
:obj-data="objData"></table-body>
</div>
</div>
@ -128,7 +128,7 @@
return {
ready: false,
tableWidth: 0,
columnsWidth: [],
columnsWidth: {},
prefixCls: prefixCls,
compiledUids: [],
objData: this.makeObjData(), // checkbox or highlight-row
@ -176,7 +176,7 @@
let style = {};
let width = 0;
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`;
return style;
@ -185,7 +185,7 @@
let style = {};
let width = 0;
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`;
return style;
@ -231,25 +231,35 @@
},
handleResize () {
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) {
this.tableWidth = this.columns.map(cell => cell.width).reduce((a, b) => a + b);
} else {
this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
}
this.columnsWidth = {};
this.$nextTick(() => {
this.columnsWidth = [];
let columnsWidth = {};
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');
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) {
this.columnsWidth.push(parseInt(getStyle($td[i], 'width')) - 1);
} else {
this.columnsWidth.push(parseInt(getStyle($td[i], 'width')));
width = parseInt(getStyle($td[i], 'width')) - 1;
}
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) => {
column._index = index;
column._width = column.width ? column.width : ''; // update in handleResize()
column._sortType = 'normal';
column._filterVisible = false;
column._isFiltered = false;

8
test/routers/table.vue
View file

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