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

column add prop minValue and maxValue

Browse source
This commit is contained in:
huanghong 2018-03-30 22:12:54 +08:00
parent 75803add58
commit 77201524ba
2 changed files with 142 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

42
examples/routers/table.vue
View file

@ -1,15 +1,17 @@
<template> <template>
<div> <div>
<br><br><br><br><br> <!-- <br><br><br><br><br>
<Table border :columns="columns1" height="500" :data="data1"></Table> <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>--> <!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
<!--<br><br><br><br><br>--> <!--<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> <br><br><br><br><br>
<Table border :columns="columns6" :data="data5"></Table> <!-- <Table border :columns="columns6" :data="data5"></Table> -->
<br><br><br><br><br> <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> <br><br><br><br><br>
</div> </div>
</template> </template>
@ -117,7 +119,7 @@
key: 'gender', key: 'gender',
align: 'center', align: 'center',
width: 200, width: 200,
//fixed: 'right' fixed: 'right'
} }
], ],
columns2: [ columns2: [
@ -393,6 +395,34 @@
date: '2016-10-04' 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 () { mounted () {

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

@ -375,60 +375,116 @@
}); });
this.$nextTick(() => { this.$nextTick(() => {
let columnsWidth = {}; let columnsWidth = {};
let autoWidthIndex = -1;
if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);//todo 这行可能有问题
if (this.data.length) { let hasWidthColumns = [];
const $tr = this.$refs.tbody.$el.querySelectorAll('tbody tr'); let noWidthColumns = [];
if ($tr.length === 0) return; let minWidthColumns = [];
const $td = $tr[0].children; let maxWidthColumns = [];
for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox this.cloneColumns.forEach((col) => {
const column = this.cloneColumns[i]; if (col.width) {
hasWidthColumns.push(col);
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
};
} }
this.columnsWidth = columnsWidth; else{
this.$nextTick(()=>{ noWidthColumns.push(col);
this.fixedHeader(); if(col.minWidth){
if (this.$refs.tbody) { minWidthColumns.push(col);
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');
}
} }
}); 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 // 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')); this.bodyRealHeight = parseInt(getStyle(this.$refs.tbody.$el, 'height'));