diff --git a/examples/routers/table.vue b/examples/routers/table.vue
index d6e094b..7434bfd 100644
--- a/examples/routers/table.vue
+++ b/examples/routers/table.vue
@@ -1,15 +1,17 @@
@@ -117,7 +119,7 @@
key: 'gender',
align: 'center',
width: 200,
- //fixed: 'right'
+ fixed: 'right'
}
],
columns2: [
@@ -393,6 +395,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 () {
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index f679020..1255070 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -375,60 +375,116 @@
});
this.$nextTick(() => {
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 = [];
+ let maxWidthColumns = [];
+ this.cloneColumns.forEach((col) => {
+ if (col.width) {
+ hasWidthColumns.push(col);
+ }
+ else{
+ noWidthColumns.push(col);
+ if(col.minWidth){
+ minWidthColumns.push(col);
}
- if (column.width) width = column.width;
+ if(col.maxWidth){
+ maxWidthColumns.push(col);
+ }
+ }
+ });
- this.cloneColumns[i]._width = width;
+ minWidthColumns.sort((a,b)=>a.minWidth > b.minWidth);
+ maxWidthColumns.sort((a,b)=>a.maxWidth < b.maxWidth);
- columnsWidth[column._index] = {
- width: width
- };
+ 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);
}
- 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 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 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
this.bodyRealHeight = parseInt(getStyle(this.$refs.tbody.$el, 'height'));
--
libgit2 0.21.4