update table columns width compute

This commit is contained in:
huanghong 2018-04-16 21:26:54 +08:00
parent b0794170c4
commit 0f983a5c5a
2 changed files with 16 additions and 13 deletions

View file

@ -57,8 +57,9 @@
<Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
<Content :style="{background:'#FFCF9E'}">
<!-- <Table border :columns="columns1" height="500" :data="data1"></Table> -->
<br>
<Table border :columns="columns5" :data="data5"></Table>
<!-- <br> -->
<!-- <Table border :columns="columns5" :data="data5"></Table> -->
<Table border :columns="columns8" height="240" :data="data7"></Table>
</Content>
<Footer>sdfsdsdfsdfs</Footer>
</Layout>
@ -462,8 +463,8 @@
title: 'Date',
key: 'date',
sortable: true,
minWidth:100,
maxWidth:200,
minWidth:80,
maxWidth:150,
},
{
title: 'Name',
@ -474,14 +475,14 @@
{
title: 'Age',
key: 'age',
minWidth:100,
maxWidth:200,
minWidth:60,
maxWidth:100,
},
{
title: 'Address',
key: 'address',
minWidth:200,
maxWidth:300,
//maxWidth:300,
}
],
}

View file

@ -367,6 +367,7 @@
let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
console.log(tableWidth);
let usableWidth = tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
let usableLength = noWidthColumns.length;
let columnWidth = 0;
@ -425,13 +426,13 @@
if (column._width) {
width = column._width;
}
else if (column.minWidth > width){
else {
if (column.minWidth > width){
width = column.minWidth;
}
else if (column.maxWidth < width){
width = column.maxWidth;
}
else {
if (usableWidth>0) {
if (usableLength > 1) {
usableLength--;
@ -457,6 +458,7 @@
}
//this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0);
this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);
console.log(this.tableWidth);
this.columnsWidth = columnsWidth;
this.fixedHeader();
},