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

Merge pull request #3415 from huanghong1125/table

Browse source 
update table
This commit is contained in:
Aresn 2018-04-17 14:16:33 +08:00 • committed by GitHub
commit 3dc998e6ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
examples/routers/table.vue
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>
@ -458,12 +459,18 @@
],
columns8: [
{
title: 'Address',
key: 'address',
minWidth:200,
//maxWidth:300,
},
{
title: 'Date',
key: 'date',
sortable: true,
minWidth:100,
maxWidth:200,
maxWidth:150,
},
{
title: 'Name',
@ -474,15 +481,9 @@
{
title: 'Age',
key: 'age',
minWidth:100,
maxWidth:200,
minWidth:60,
maxWidth:100,
},
{
title: 'Address',
key: 'address',
minWidth:200,
maxWidth:300,
}
],
}
},

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

@ -188,8 +188,6 @@
objData: this.makeObjData(), // checkbox or highlight-row
rebuildData: [], // for sort or filter
cloneColumns: this.makeColumns(colsWithId),
minWidthColumns:[],
maxWidthColumns:[],
columnRows: this.makeColumnRows(false, colsWithId),
leftFixedColumnRows: this.makeColumnRows('left', colsWithId),
rightFixedColumnRows: this.makeColumnRows('right', colsWithId),
@ -350,74 +348,43 @@
//let tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
let tableWidth = this.$el.offsetWidth - 1;
let columnsWidth = {};
let sumMinWidth = 0;
let hasWidthColumns = [];
let noWidthColumns = [];
let minWidthColumns = this.minWidthColumns;
let maxWidthColumns = this.maxWidthColumns;
let maxWidthColumns = [];
let noMaxWidthColumns = [];
this.cloneColumns.forEach((col) => {
if (col.width) {
hasWidthColumns.push(col);
}
else{
noWidthColumns.push(col);
if (col.minWidth) {
sumMinWidth += col.minWidth;
}
if (col.maxWidth) {
maxWidthColumns.push(col);
}
else {
noMaxWidthColumns.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 usableWidth = tableWidth - unUsableWidth - sumMinWidth - (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;
let width = columnWidth + (column.minWidth?column.minWidth:0);
if(column.width){
width = column.width;
}
@ -425,17 +392,18 @@
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) {
usableWidth -= width - (column.minWidth?column.minWidth:0);
usableLength--;
usableWidth -= width;
if (usableLength > 0) {
columnWidth = parseInt(usableWidth / usableLength);
}
else {
@ -448,14 +416,37 @@
}
}
this.cloneColumns[i]._width = width;
column._width = width;
columnsWidth[column._index] = {
width: width
};
}
//this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0);
if(usableWidth>0) {
usableLength = noMaxWidthColumns.length;
columnWidth = parseInt(usableWidth / usableLength);
for (let i = 0; i < noMaxWidthColumns.length; i++) {
const column = noMaxWidthColumns[i];
let width = column._width + columnWidth;
if (usableLength > 1) {
usableLength--;
usableWidth -= columnWidth;
columnWidth = parseInt(usableWidth / usableLength);
}
else {
columnWidth = 0;
}
column._width = width;
columnsWidth[column._index] = {
width: width
};
}
}
this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);
this.columnsWidth = columnsWidth;
this.fixedHeader();
@ -877,25 +868,6 @@
makeColumnRows (fixedType, cols) {
return convertToRows(cols, 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) {
@ -932,7 +904,6 @@
},
mounted () {
this.handleResize();
this.setMinMaxColumnRows();
this.$nextTick(() => this.ready = true);
on(window, 'resize', this.handleResize);
@ -972,7 +943,6 @@
const colsWithId = this.makeColumnsId(this.columns);
this.allColumns = getAllColumns(colsWithId);
this.cloneColumns = this.makeColumns(colsWithId);
this.setMinMaxColumnRows();
this.columnRows = this.makeColumnRows(false, colsWithId);
this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);