diff --git a/examples/routers/table.vue b/examples/routers/table.vue index 0558bf4..de4b808 100644 --- a/examples/routers/table.vue +++ b/examples/routers/table.vue @@ -5,7 +5,7 @@




-
+










@@ -109,6 +109,13 @@ align: 'center', width: 200, fixed: 'right' + }, + { + title: 'Gender', + key: 'gender', + align: 'center', + width: 200, + fixed: 'right' } ], columns2: [ diff --git a/src/components/table/mixin.js b/src/components/table/mixin.js index 656a7c8..63566d6 100644 --- a/src/components/table/mixin.js +++ b/src/components/table/mixin.js @@ -32,8 +32,17 @@ export default { } // when fixed type,reset first right fixed column's width if (this.fixed === 'right' && top ) { - //const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right'); - if (this.columns.length === index + 1) { + //const firstFixedIndex = this.columns.lastIndexOf((col) => col.fixed === 'right'); + let lastFixedIndex = -1; + for(let i=0;i +
@@ -199,7 +200,8 @@ cloneData: deepCopy(this.data), // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data showVerticalScrollBar:false, showHorizontalScrollBar:false, - headerWidth:0 + headerWidth:0, + headerHeight:0, }; }, computed: { @@ -293,6 +295,17 @@ style.right = `${this.showVerticalScrollBar?this.scrollBarWidth:0}px`; return style; }, + fixedRightHeaderStyle () { + let style = {}; + let width = 0; + let height = this.headerHeight+1; + if(this.showVerticalScrollBar){ + width = this.scrollBarWidth; + } + style.width = `${width}px`; + style.height = `${height}px`; + return style; + }, bodyStyle () { let style = {}; if (this.bodyHeight !== 0) { @@ -345,6 +358,7 @@ this.columnsWidth = {}; this.$nextTick(()=>{ this.headerWidth = this.$refs.header.childNodes[0].offsetWidth; + this.headerHeight = this.$refs.header.childNodes[0].offsetHeight; if (!this.$refs.tbody) { this.showVerticalScrollBar = false; return; diff --git a/src/styles/components/table.less b/src/styles/components/table.less index e3376e5..15c3125 100644 --- a/src/styles/components/table.less +++ b/src/styles/components/table.less @@ -288,6 +288,14 @@ right: 0; box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2); } + &-fixed-right-header{ + position: absolute; + top: -1px; + right: 0; + background-color: @table-thead-bg; + border-top: 1px solid @border-color-base; + border-bottom: 1px solid @border-color-split; + } &-fixed-header{ overflow: hidden; &-with-empty{ -- libgit2 0.21.4