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

Merge pull request #3284 from huanghong1125/2.0

Browse source 
column add prop minWidth and maxWidth
This commit is contained in:
Aresn 2018-04-10 15:18:53 +08:00 • committed by GitHub
commit 6cbd947611
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 239 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
examples/routers/table.vue
View file

@ -1,15 +1,20 @@
<template>
<div>
<br><br><br><br><br>
<Table border :columns="columns1" height="500" :data="data1"></Table>
<br><br><br><br><br>
<!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
<Table border :show-header='false' :columns="columns1" height="500" :data="data1"></Table>
<!-- <Table border :columns="columns1" height='300'></Table> -->
<!-- <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>
<br><br><br><br><br>
<Table border :columns="columns6" :data="data5"></Table>
<br><br><br><br><br>
<!-- <Table border :columns="columns5" height="240" :data="data5"></Table> -->
<!-- <br><br><br><br><br> -->
<!-- <Table border :columns="columns6" :data="data5"></Table> -->
<!-- <br><br><br><br><br> -->
<Table border :show-header='false' :columns="columns7" height="200" :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> -->
<!-- <Table border :columns="columns8" height="200"></Table> -->
<br><br><br><br><br>
</div>
</template>
@ -22,7 +27,8 @@
title: 'Name',
key: 'name',
align: 'center',
width: 200,
minWidth: 100,
maxWidth: 200,
fixed: 'left',
filters: [
{
@ -51,7 +57,8 @@
title: 'Age',
key: 'age',
align: 'center',
width: 200,
minWidth: 100,
maxWidth: 200,
sortable: true
},
{
@ -62,7 +69,8 @@
title: 'Street',
key: 'street',
align: 'center',
width: 200
minWidth: 100,
maxWidth: 200,
},
{
title: 'Block',
@ -72,14 +80,16 @@
title: 'Building',
key: 'building',
align: 'center',
width: 200,
minWidth: 100,
maxWidth: 200,
sortable: true
},
{
title: 'Door No.',
key: 'door',
align: 'center',
width: 200
minWidth: 100,
maxWidth: 200,
}
]
}
@ -95,13 +105,15 @@
title: 'Company Address',
key: 'caddress',
align: 'center',
width: 200
minWidth: 100,
maxWidth: 200,
},
{
title: 'Company Name',
key: 'cname',
align: 'center',
width: 200
minWidth: 100,
maxWidth: 200,
}
]
},
@ -116,8 +128,9 @@
title: 'Gender',
key: 'gender',
align: 'center',
width: 200,
//fixed: 'right'
minWidth: 100,
maxWidth: 200,
fixed: 'right'
}
],
columns2: [
@ -360,6 +373,7 @@
{
title: 'Age',
key: 'age',
width:200,
},
{
title: 'Address',
@ -393,6 +407,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 () {

1
package.json
View file

@ -20,6 +20,7 @@
],
"scripts": {
"dev": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 8081 --config build/webpack.dev.config.js",
"dev:s": "webpack-dev-server --content-base test/ --open --inline --hot --compress --history-api-fallback --port 8081 --host 0.0.0.0 --config build/webpack.dev.config.js",
"dist:style": "gulp --gulpfile build/build-style.js",
"dist:dev": "webpack --config build/webpack.dist.dev.config.js",
"dist:prod": "webpack --config build/webpack.dist.prod.config.js",

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

@ -187,6 +187,8 @@
objData: this.makeObjData(), // checkbox or highlight-row
rebuildData: [], // for sort or filter
cloneColumns: this.makeColumns(),
minWidthColumns:[],
maxWidthColumns:[],
columnRows: this.makeColumnRows(false),
leftFixedColumnRows: this.makeColumnRows('left'),
rightFixedColumnRows: this.makeColumnRows('right'),
@ -194,7 +196,6 @@
showSlotHeader: true,
showSlotFooter: true,
bodyHeight: 0,
bodyRealHeight: 0,
scrollBarWidth: getScrollBarSize(),
currentContext: this.context,
cloneData: deepCopy(this.data), // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
@ -251,7 +252,7 @@
styles () {
let style = {};
if (this.height) {
const height = (this.isLeftFixed || this.isRightFixed) ? parseInt(this.height) + this.scrollBarWidth : parseInt(this.height);
const height = parseInt(this.height);
style.height = `${height}px`;
}
if (this.width) style.width = `${this.width}px`;
@ -263,13 +264,9 @@
let width = '';
if (this.bodyHeight === 0) {
width = this.tableWidth;
} else {
if (this.bodyHeight > this.bodyRealHeight) {
width = this.tableWidth;
} else {
width = this.tableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
}
}
// const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
style.width = `${width}px`;
}
@ -318,8 +315,7 @@
bodyStyle () {
let style = {};
if (this.bodyHeight !== 0) {
// add a height to resolve scroll bug when browser has a scrollBar in fixed type and height prop
const height = (this.isLeftFixed || this.isRightFixed) ? this.bodyHeight + this.scrollBarWidth : this.bodyHeight;
const height = this.bodyHeight;
style.height = `${height}px`;
}
return style;
@ -327,15 +323,8 @@
fixedBodyStyle () {
let style = {};
if (this.bodyHeight !== 0) {
let height = this.bodyHeight + (!this.showHorizontalScrollBar?this.scrollBarWidth:0) - 1;
// #2102 里，如果 Table 没有设置 width，而是集成父级的 width，固定列也应该不包含滚动条高度，所以这里直接计算表格宽度
const tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth+(this.showVerticalScrollBar?this.scrollBarWidth:0)){
height = this.bodyHeight;
}
// style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;
style.height = this.scrollBarWidth > 0 ? `${height}px` : `${height - 1}px`;
let height = this.bodyHeight - (this.showHorizontalScrollBar?this.scrollBarWidth:0);
style.height = this.showHorizontalScrollBar ? `${height}px` : `${height - 1}px`;
}
return style;
},
@ -357,82 +346,118 @@
return this.rowClassName(this.data[index], index);
},
handleResize () {
this.$nextTick(() => {
const allWidth = !this.allColumns.some(cell => !cell.width); // each column set a width
if (allWidth) {
this.tableWidth = this.allColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
} else {
this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
}
this.columnsWidth = {};
this.$nextTick(()=>{
this.headerWidth = this.$refs.header.childNodes[0].offsetWidth;
this.headerHeight = this.$refs.header.childNodes[0].offsetHeight;
if (!this.$refs.tbody) {
this.showVerticalScrollBar = false;
return;
}
});
this.$nextTick(() => {
//let tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
let tableWidth = this.$el.offsetWidth - 1;
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;
let hasWidthColumns = [];
let noWidthColumns = [];
let minWidthColumns = this.minWidthColumns;
let maxWidthColumns = this.maxWidthColumns;
this.cloneColumns.forEach((col) => {
if (col.width) {
hasWidthColumns.push(col);
}
else{
noWidthColumns.push(col);
}
col._width = null;
});
let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
let usableWidth = tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
let usableLength = noWidthColumns.length;
let columnWidth = 0;
if(usableWidth > 0 && usableLength > 0){
columnWidth = parseInt(usableWidth / usableLength);
}
for (let i = 0; i < maxWidthColumns.length; i++) {
if(columnWidth > maxWidthColumns[i].maxWidth){
maxWidthColumns[i]._width = maxWidthColumns[i].maxWidth;
usableWidth -= maxWidthColumns[i].maxWidth;
usableLength--;
if (usableWidth>0) {
if (usableLength === 0) {
columnWidth = 0;
}
else {
columnWidth = parseInt(usableWidth / usableLength);
}
}
else{
columnWidth = 0;
}
}
}
for (let i = 0; i < minWidthColumns.length; i++) {
if(columnWidth < minWidthColumns[i].minWidth && !minWidthColumns[i].width){
if(!minWidthColumns[i]._width){
minWidthColumns[i]._width = minWidthColumns[i].minWidth;
usableWidth -= minWidthColumns[i].minWidth;
usableLength--;
if (usableWidth>0) {
if (usableLength === 0) {
columnWidth = 0;
}
else {
columnWidth = parseInt(usableWidth / usableLength);
}
}
else{
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._width) {
width = column._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--;
usableWidth -= width;
columnWidth = parseInt(usableWidth / usableLength);
}
else {
columnWidth = 0;
}
}
else{
columnWidth = 0;
}
}
}
if (column.width) width = column.width;
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.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth: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');
}
}
});
}
});
// 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'));
});
},
handleMouseIn (_index) {
if (this.disabledHover) return;
@ -540,11 +565,49 @@
const headerHeight = parseInt(getStyle(this.$refs.header, 'height')) || 0;
const footerHeight = parseInt(getStyle(this.$refs.footer, 'height')) || 0;
this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
this.fixedBody();
});
} else {
this.bodyHeight = 0;
this.fixedBody();
}
},
fixedBody (){
if (this.$refs.header) {
this.headerWidth = this.$refs.header.children[0].offsetWidth;
this.headerHeight = this.$refs.header.children[0].offsetHeight;
this.showHorizontalScrollBar = this.headerWidth>this.$refs.header.offsetWidth;
}
if (!this.$refs.tbody || !this.data || this.data.length === 0) {
this.showVerticalScrollBar = false;
}
else{
let bodyContentEl = this.$refs.tbody.$el;
let bodyEl = bodyContentEl.parentElement;
let bodyContentHeight = bodyContentEl.offsetHeight;
let bodyHeight = bodyEl.offsetHeight;
if (!this.$refs.header) {
this.showHorizontalScrollBar = bodyEl.offsetWidth < bodyContentEl.offsetWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);
}
this.showVerticalScrollBar = this.bodyHeight? bodyHeight - (this.showHorizontalScrollBar?this.scrollBarWidth:0) < bodyContentHeight : false;
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');
}
}
},
hideColumnFilter () {
this.cloneColumns.forEach((col) => col._filterVisible = false);
},
@ -809,6 +872,25 @@
makeColumnRows (fixedType) {
return convertToRows(this.columns, fixedType);
},
setMinMaxColumnRows (){
let minWidthColumns=[];
let maxWidthColumns=[];
this.cloneColumns.forEach((col) => {
if (!col.width) {
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);
this.minWidthColumns = minWidthColumns;
this.maxWidthColumns = maxWidthColumns;
},
exportCsv (params) {
if (params.filename) {
if (params.filename.indexOf('.csv') === -1) {
@ -845,7 +927,7 @@
},
mounted () {
this.handleResize();
this.fixedHeader();
this.setMinMaxColumnRows();
this.$nextTick(() => this.ready = true);
on(window, 'resize', this.handleResize);
@ -855,7 +937,6 @@
this.$on('on-visible-change', (val) => {
if (val) {
this.handleResize();
this.fixedHeader();
}
});
},
@ -885,6 +966,8 @@
// todo 这里有性能问题，可能是左右固定计算属性影响的
this.allColumns = getAllColumns(this.columns);
this.cloneColumns = this.makeColumns();
this.setMinMaxColumnRows();
this.columnRows = this.makeColumnRows(false);
this.leftFixedColumnRows = this.makeColumnRows('left');
this.rightFixedColumnRows = this.makeColumnRows('right');
@ -895,11 +978,12 @@
},
height () {
this.handleResize();
this.fixedHeader();
},
showHorizontalScrollBar () {
this.handleResize();
this.fixedHeader();
},
showVerticalScrollBar () {
this.handleResize();
}
}
};