column add prop minValue and maxValue
This commit is contained in:
huanghong
parent
75803add58
commit
77201524ba
2 changed files with 142 additions and 56 deletions
|
|
@ -1,15 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<br><br><br><br><br>
|
||||
<!-- <br><br><br><br><br>
|
||||
<Table border :columns="columns1" height="500" :data="data1"></Table>
|
||||
<br><br><br><br><br>
|
||||
<br><br><br><br><br> -->
|
||||
<!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
|
||||
<!--<br><br><br><br><br>-->
|
||||
<Table border :columns="columns5" height="240" :data="data5"></Table>
|
||||
<!-- <Table border :columns="columns5" height="240" :data="data5"></Table> -->
|
||||
<br><br><br><br><br>
|
||||
<Table border :columns="columns6" :data="data5"></Table>
|
||||
<!-- <Table border :columns="columns6" :data="data5"></Table> -->
|
||||
<br><br><br><br><br>
|
||||
<Table border :columns="columns7" height="240" :data="data7"></Table>
|
||||
<!-- <Table border :columns="columns7" height="240" :data="data7"></Table>
|
||||
<br><br><br><br><br> -->
|
||||
<Table border :columns="columns8" :data="data7" height="200"></Table>
|
||||
<br><br><br><br><br>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -117,7 +119,7 @@
|
|||
key: 'gender',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
//fixed: 'right'
|
||||
fixed: 'right'
|
||||
}
|
||||
],
|
||||
columns2: [
|
||||
|
|
@ -393,6 +395,34 @@
|
|||
date: '2016-10-04'
|
||||
}
|
||||
],
|
||||
|
||||
columns8: [
|
||||
{
|
||||
title: 'Date',
|
||||
key: 'date',
|
||||
sortable: true,
|
||||
minWidth:100,
|
||||
maxWidth:200,
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
minWidth:100,
|
||||
maxWidth:200,
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
minWidth:100,
|
||||
maxWidth:200,
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
minWidth:200,
|
||||
maxWidth:300,
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
|
|||
|
|
@ -375,60 +375,116 @@
|
|||
});
|
||||
this.$nextTick(() => {
|
||||
let columnsWidth = {};
|
||||
let autoWidthIndex = -1;
|
||||
if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);//todo 这行可能有问题
|
||||
|
||||
if (this.data.length) {
|
||||
const $tr = this.$refs.tbody.$el.querySelectorAll('tbody tr');
|
||||
if ($tr.length === 0) return;
|
||||
const $td = $tr[0].children;
|
||||
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) {
|
||||
width = parseInt(getStyle($td[i], 'width')) - 1;
|
||||
}
|
||||
if (column.width) width = column.width;
|
||||
|
||||
this.cloneColumns[i]._width = width;
|
||||
|
||||
columnsWidth[column._index] = {
|
||||
width: width
|
||||
};
|
||||
let hasWidthColumns = [];
|
||||
let noWidthColumns = [];
|
||||
let minWidthColumns = [];
|
||||
let maxWidthColumns = [];
|
||||
this.cloneColumns.forEach((col) => {
|
||||
if (col.width) {
|
||||
hasWidthColumns.push(col);
|
||||
}
|
||||
this.columnsWidth = columnsWidth;
|
||||
this.$nextTick(()=>{
|
||||
this.fixedHeader();
|
||||
if (this.$refs.tbody) {
|
||||
let bodyContentEl = this.$refs.tbody.$el;
|
||||
let bodyEl = bodyContentEl.parentElement;
|
||||
let bodyContentHeight = bodyContentEl.offsetHeight;
|
||||
let bodyContentWidth = bodyContentEl.offsetWidth;
|
||||
let bodyWidth = bodyEl.offsetWidth;
|
||||
let bodyHeight = bodyEl.offsetHeight;
|
||||
let scrollBarWidth = 0;
|
||||
if (bodyWidth < bodyContentWidth + (bodyHeight<bodyContentHeight?this.scrollBarWidth : 0)) {
|
||||
scrollBarWidth = this.scrollBarWidth;
|
||||
}
|
||||
|
||||
this.showVerticalScrollBar = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
|
||||
this.showHorizontalScrollBar = bodyWidth < bodyContentWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);
|
||||
|
||||
if(this.showVerticalScrollBar){
|
||||
bodyEl.classList.add(this.prefixCls +'-overflowY');
|
||||
}else{
|
||||
bodyEl.classList.remove(this.prefixCls +'-overflowY');
|
||||
}
|
||||
if(this.showHorizontalScrollBar){
|
||||
bodyEl.classList.add(this.prefixCls +'-overflowX');
|
||||
}else{
|
||||
bodyEl.classList.remove(this.prefixCls +'-overflowX');
|
||||
}
|
||||
|
||||
else{
|
||||
noWidthColumns.push(col);
|
||||
if(col.minWidth){
|
||||
minWidthColumns.push(col);
|
||||
}
|
||||
});
|
||||
if(col.maxWidth){
|
||||
maxWidthColumns.push(col);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
minWidthColumns.sort((a,b)=>a.minWidth > b.minWidth);
|
||||
maxWidthColumns.sort((a,b)=>a.maxWidth < b.maxWidth);
|
||||
|
||||
let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
|
||||
let usableWidth = this.tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
|
||||
let usableLength = noWidthColumns.length;
|
||||
let columnWidth = parseInt(usableWidth / usableLength);
|
||||
|
||||
for (let i = 0; i < maxWidthColumns.length; i++) {
|
||||
if(columnWidth > maxWidthColumns[i].maxWidth){
|
||||
usableWidth -= maxWidthColumns[i].maxWidth;
|
||||
usableLength--;
|
||||
columnWidth = parseInt(usableWidth / usableLength);
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < minWidthColumns.length; i++) {
|
||||
if(columnWidth < minWidthColumns[i].minWidth){
|
||||
usableWidth -= minWidthColumns[i].minWidth;
|
||||
usableLength--;
|
||||
columnWidth = parseInt(usableWidth / usableLength);
|
||||
}
|
||||
}
|
||||
|
||||
if (usableLength===0){
|
||||
columnWidth = 0;
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.cloneColumns.length; i++) {
|
||||
const column = this.cloneColumns[i];
|
||||
let width = columnWidth;
|
||||
if(column.width){
|
||||
width = column.width;
|
||||
}
|
||||
else{
|
||||
if (column.minWidth > width){
|
||||
width = column.minWidth;
|
||||
}
|
||||
else if (column.maxWidth < width){
|
||||
width = column.maxWidth;
|
||||
}
|
||||
else{
|
||||
if (usableLength > 1) {
|
||||
usableLength--;
|
||||
usableWidth -= width;
|
||||
columnWidth = parseInt(usableWidth / usableLength);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
this.cloneColumns[i]._width = width;
|
||||
|
||||
columnsWidth[column._index] = {
|
||||
width: width
|
||||
};
|
||||
|
||||
}
|
||||
this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0);
|
||||
this.columnsWidth = columnsWidth;
|
||||
this.$nextTick(()=>{
|
||||
this.fixedHeader();
|
||||
if (this.$refs.tbody) {
|
||||
let bodyContentEl = this.$refs.tbody.$el;
|
||||
let bodyEl = bodyContentEl.parentElement;
|
||||
let bodyContentHeight = bodyContentEl.offsetHeight;
|
||||
let bodyContentWidth = bodyContentEl.offsetWidth;
|
||||
let bodyWidth = bodyEl.offsetWidth;
|
||||
let bodyHeight = bodyEl.offsetHeight;
|
||||
let scrollBarWidth = 0;
|
||||
if (bodyWidth < bodyContentWidth + (bodyHeight<bodyContentHeight?this.scrollBarWidth : 0)) {
|
||||
scrollBarWidth = this.scrollBarWidth;
|
||||
}
|
||||
|
||||
this.showVerticalScrollBar = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
|
||||
this.showHorizontalScrollBar = bodyWidth < bodyContentWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);
|
||||
|
||||
if(this.showVerticalScrollBar){
|
||||
bodyEl.classList.add(this.prefixCls +'-overflowY');
|
||||
}else{
|
||||
bodyEl.classList.remove(this.prefixCls +'-overflowY');
|
||||
}
|
||||
if(this.showHorizontalScrollBar){
|
||||
bodyEl.classList.add(this.prefixCls +'-overflowX');
|
||||
}else{
|
||||
bodyEl.classList.remove(this.prefixCls +'-overflowX');
|
||||
}
|
||||
this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);
|
||||
}
|
||||
});
|
||||
});
|
||||
// get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
|
||||
this.bodyRealHeight = parseInt(getStyle(this.$refs.tbody.$el, 'height'));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue