diff --git a/src/components/table/cell.vue b/src/components/table/cell.vue index c2a61a2d..fa668920 100644 --- a/src/components/table/cell.vue +++ b/src/components/table/cell.vue @@ -19,7 +19,10 @@ naturalIndex: Number, // index of rebuildData index: Number, // _index of data checked: Boolean, - fixed: Boolean + fixed: { + type: [Boolean, String], + default: false + } }, data () { return { diff --git a/src/components/table/mixin.js b/src/components/table/mixin.js index 189d1f3f..f477259e 100644 --- a/src/components/table/mixin.js +++ b/src/components/table/mixin.js @@ -1,7 +1,15 @@ export default { methods: { alignCls (column) { - return column.align ? `${this.prefixCls}-column-${column.align}` : ''; + return [ + { + [`${this.prefixCls}-column-${column.align}`]: column.align, + [`${this.prefixCls}-hidden`]: (this.fixed === 'left' && column.fixed !== 'left') || (this.fixed === 'right' && column.fixed !== 'right') || (!this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right')) + } + ] + }, + isPopperShow (column) { + return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right')); } } } \ No newline at end of file diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue index bb1f6e72..df540458 100644 --- a/src/components/table/table-body.vue +++ b/src/components/table/table-body.vue @@ -37,7 +37,10 @@ columns: Array, data: Array, // rebuildData objData: Object, - fixed: Boolean + fixed: { + type: [Boolean, String], + default: false + } }, methods: { rowClasses (_index) { diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue index 5d26f58a..8c1e3f72 100644 --- a/src/components/table/table-head.vue +++ b/src/components/table/table-head.vue @@ -15,7 +15,7 @@ @@ -69,7 +69,10 @@ columns: Array, objData: Object, data: Array, // rebuildData - fixed: Boolean + fixed: { + type: [Boolean, String], + default: false + } }, computed: { isSelectAll () { diff --git a/src/components/table/table.vue b/src/components/table/table.vue index 9ce296eb..4f0e4868 100644 --- a/src/components/table/table.vue +++ b/src/components/table/table.vue @@ -19,10 +19,10 @@ :data="rebuildData" :obj-data="objData"> -
+
-
+
a + b); + let width = 0; + this.leftFixedColumns.forEach((col) => { + if (col.fixed && col.fixed === 'left') width += col.width; + }); + style.width = `${width}px`; return style; }, fixedRightTableStyle () { let style = {}; - if (this.rightFixedColumns.length) style.width = this.rightFixedColumns.reduce((a, b) => a + b); + let width = 0; + this.rightFixedColumns.forEach((col) => { + if (col.fixed && col.fixed === 'right') width += col.width; + }); + style.width = `${width}px`; return style; }, bodyStyle () { @@ -188,21 +196,27 @@ }, leftFixedColumns () { let left = []; + let other = []; this.cloneColumns.forEach((col) => { if (col.fixed && col.fixed === 'left') { left.push(col); + } else { + other.push(col); } }); - return left; + return left.concat(other); }, rightFixedColumns () { let right = []; + let other = []; this.cloneColumns.forEach((col) => { if (col.fixed && col.fixed === 'right') { right.push(col); + } else { + other.push(col); } }); - return right; + return right.concat(other); } }, methods: { @@ -457,6 +471,10 @@ } else { column._filterMultiple = true; } + if ('filteredValue' in column) { + column._filterChecked = column.filteredValue; + column._isFiltered = true; + } if (column.fixed && column.fixed === 'left') { left.push(column); @@ -472,6 +490,7 @@ compiled () { this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(//gmi, '') !== ''; this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(//gmi, '') !== ''; + this.rebuildData = this.makeDataWithSortAndFilter(); }, ready () { this.handleResize(); diff --git a/src/styles/components/table.less b/src/styles/components/table.less index 30378a64..bde0fa97 100644 --- a/src/styles/components/table.less +++ b/src/styles/components/table.less @@ -206,7 +206,6 @@ position: absolute; top: 0; left: 0; - //box-shadow: @shadow-right; box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2); &::before { @@ -224,13 +223,10 @@ top: 0; left: auto; right: 0; - //box-shadow: @shadow-left; box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2); } &-fixed-header{ overflow: hidden; - //position: relative; - //z-index: 3; } &-fixed-body{ overflow: hidden; diff --git a/test/routers/table.vue b/test/routers/table.vue index 981bb452..bbc6987e 100644 --- a/test/routers/table.vue +++ b/test/routers/table.vue @@ -8,7 +8,7 @@
${row.tag}`; @@ -129,7 +130,7 @@ title: '地址', key: 'address', align: 'center', -// fixed: 'right', +// fixed: 'left', width: 100, // render (row, column, index) { // if (row.edit) { @@ -142,17 +143,35 @@ { title: '操作', key: 'action', - fixed: 'right', - width: 120, +// fixed: 'right', + width: 250, render (row, column, index) { return `${row.name}${index}`; - return `${row.name}`; +// return `${row.name}`; + }, + filters: [ + { + label: '两个字', + value: 1 + }, + { + label: '三个字', + value: 2 + } + ], + filterMultiple: false, + filterMethod (value, row) { + if (value === 1) { + return row.name.length == 2; + } else if (value === 2) { + return row.name.length == 3; + } } } ], data: [ { - name: '梁灏', + name: '梁灏梁灏梁灏梁灏梁灏梁灏梁灏', age: 25, address: '北京市朝阳区', edit: false,