diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index 570734fd..3957d2a6 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -57,8 +57,9 @@
-
-
+
+
+
@@ -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,
- }
],
}
},
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 38cbecee..60ddadbb 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -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){
- width = column.minWidth;
- }
- else if (column.maxWidth < width){
- width = column.maxWidth;
- }
else {
+ if (column.minWidth > width){
+ width = column.minWidth;
+ }
+ else if (column.maxWidth < width){
+ width = column.maxWidth;
+ }
+
if (usableWidth>0) {
- if (usableLength > 1) {
- usableLength--;
- usableWidth -= width;
+ usableWidth -= width - (column.minWidth?column.minWidth:0);
+ usableLength--;
+ 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);