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> <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
<Content :style="{background:'#FFCF9E'}"> <Content :style="{background:'#FFCF9E'}">
<!-- <Table border :columns="columns1" height="500" :data="data1"></Table> --> <!-- <Table border :columns="columns1" height="500" :data="data1"></Table> -->
<br> <!-- <br> -->
<Table border :columns="columns5" :data="data5"></Table> <!-- <Table border :columns="columns5" :data="data5"></Table> -->
<Table border :columns="columns8" height="240" :data="data7"></Table>
</Content> </Content>
<Footer>sdfsdsdfsdfs</Footer> <Footer>sdfsdsdfsdfs</Footer>
</Layout> </Layout>
@ -458,12 +459,18 @@
], ],
columns8: [ columns8: [
{
title: 'Address',
key: 'address',
minWidth:200,
//maxWidth:300,
},
{ {
title: 'Date', title: 'Date',
key: 'date', key: 'date',
sortable: true, sortable: true,
minWidth:100, minWidth:100,
maxWidth:200, maxWidth:150,
}, },
{ {
title: 'Name', title: 'Name',
@ -474,15 +481,9 @@
{ {
title: 'Age', title: 'Age',
key: 'age', key: 'age',
minWidth:100, minWidth:60,
maxWidth:200, maxWidth:100,
}, },
{
title: 'Address',
key: 'address',
minWidth:200,
maxWidth:300,
}
], ],
} }
}, },

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

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