fixed ivu-table-fixed-right scroll bar
This commit is contained in:
huanghong
parent
8e171de8e0
commit
9fea8e7de0
4 changed files with 146 additions and 27 deletions
|
|
@ -5,7 +5,12 @@
|
|||
<Button @click="handleClearData">Clear Data</Button>
|
||||
<Button @click="handleSelectAll(true)">Set all selected</Button>
|
||||
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
|
||||
|
||||
<div style='margin:20px 0px'>
|
||||
<Table border :columns="columns2" :data="data3"></Table>
|
||||
</div>
|
||||
<div style='margin:20px 0px'>
|
||||
<Table :height='200' border :columns="columns2" :data="data3"></Table>
|
||||
</div>
|
||||
<div style='margin:20px 0px;'>
|
||||
<Table :data="tableData1" :columns="tableColumns1" :height='500' stripe size='small'></Table>
|
||||
<div style="margin: 10px;overflow: hidden">
|
||||
|
|
@ -14,6 +19,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -49,6 +55,95 @@
|
|||
data1: [
|
||||
|
||||
],
|
||||
columns2: [
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
width: 100,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'Province',
|
||||
key: 'province',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'City',
|
||||
key: 'city',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: 'Postcode',
|
||||
key: 'zip',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 120,
|
||||
render: (h, params) => {
|
||||
return h('div', [
|
||||
h('Button', {
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'small'
|
||||
}
|
||||
}, 'View'),
|
||||
h('Button', {
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'small'
|
||||
}
|
||||
}, 'Edit')
|
||||
]);
|
||||
}
|
||||
}
|
||||
],
|
||||
data3: [
|
||||
{
|
||||
name: 'John Brown',
|
||||
age: 18,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
province: 'America',
|
||||
city: 'New York',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: 'Jim Green',
|
||||
age: 24,
|
||||
address: 'Washington, D.C. No. 1 Lake Park',
|
||||
province: 'America',
|
||||
city: 'Washington, D.C.',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: 'Joe Black',
|
||||
age: 30,
|
||||
address: 'Sydney No. 1 Lake Park',
|
||||
province: 'Australian',
|
||||
city: 'Sydney',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: 'Jon Snow',
|
||||
age: 26,
|
||||
address: 'Ottawa No. 2 Lake Park',
|
||||
province: 'Canada',
|
||||
city: 'Ottawa',
|
||||
zip: 100000
|
||||
}
|
||||
],
|
||||
|
||||
tableData1: [],
|
||||
tableColumns1: [
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default {
|
|||
width += scrollBarWidth;
|
||||
}
|
||||
// when fixed type,reset first right fixed column's width
|
||||
if (this.fixed === 'right') {
|
||||
if (this.fixed === 'right' && top ) {
|
||||
const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
|
||||
if (firstFixedIndex === index) {
|
||||
let scrollBarWidth = this.$parent.scrollBarWidth;
|
||||
|
|
|
|||
|
|
@ -188,6 +188,7 @@
|
|||
currentContext: this.context,
|
||||
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
|
||||
};
|
||||
},
|
||||
|
|
@ -277,8 +278,9 @@
|
|||
this.rightFixedColumns.forEach((col) => {
|
||||
if (col.fixed && col.fixed === 'right') width += col._width;
|
||||
});
|
||||
width += this.scrollBarWidth;
|
||||
//width += this.scrollBarWidth;
|
||||
style.width = `${width}px`;
|
||||
style.right = `${this.showVerticalScrollBar?this.scrollBarWidth:0}px`;
|
||||
return style;
|
||||
},
|
||||
bodyStyle () {
|
||||
|
|
@ -293,11 +295,11 @@
|
|||
fixedBodyStyle () {
|
||||
let style = {};
|
||||
if (this.bodyHeight !== 0) {
|
||||
let height = this.bodyHeight + this.scrollBarWidth - 1;
|
||||
let height = this.bodyHeight + (!this.showHorizontalScrollBar?this.scrollBarWidth:0) - 1;
|
||||
|
||||
// #2102 里，如果 Table 没有设置 width，而是集成父级的 width，固定列也应该不包含滚动条高度，所以这里直接计算表格宽度
|
||||
const tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
|
||||
if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth){
|
||||
if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth+(this.showVerticalScrollBar?this.scrollBarWidth:0)){
|
||||
height = this.bodyHeight;
|
||||
}
|
||||
// style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;
|
||||
|
|
@ -349,12 +351,13 @@
|
|||
this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
|
||||
}
|
||||
this.columnsWidth = {};
|
||||
this.fixedHeader();
|
||||
this.$nextTick(()=>{
|
||||
this.headerWidth = this.$refs.header.childNodes[0].offsetWidth;
|
||||
if (!this.$refs.tbody) {
|
||||
this.showVerticalScrollBar = false;
|
||||
return;
|
||||
}
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
let columnsWidth = {};
|
||||
let autoWidthIndex = -1;
|
||||
|
|
@ -380,22 +383,36 @@
|
|||
};
|
||||
}
|
||||
this.columnsWidth = columnsWidth;
|
||||
|
||||
this.$nextTick(()=>{
|
||||
this.fixedHeader();
|
||||
if (this.$refs.tbody) {
|
||||
let bodyContentEl = this.$refs.tbody.$el;
|
||||
let bodyEl = bodyContentEl.parentElement;
|
||||
bodyEl.className = '';
|
||||
this.$nextTick(() => { bodyEl.className = this.prefixCls + '-body'; });
|
||||
let bodyContentHeight = bodyContentEl.offsetHeight;
|
||||
let bodyContentWidth = bodyContentEl.offsetWidth;
|
||||
let bodyWidth = bodyEl.offsetWidth;
|
||||
let bodyHeight = bodyEl.offsetHeight;
|
||||
let scrollBarWidth = 0;
|
||||
if (bodyWidth < bodyContentWidth) {
|
||||
if (bodyWidth < bodyContentWidth + (bodyHeight<bodyContentHeight?this.scrollBarWidth : 0)) {
|
||||
scrollBarWidth = this.scrollBarWidth;
|
||||
}
|
||||
|
||||
this.showVerticalScrollBar = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
|
||||
this.showHorizontalScrollBar = bodyWidth < bodyContentWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);
|
||||
|
||||
if(this.showVerticalScrollBar){
|
||||
bodyEl.classList.add(this.prefixCls +'-overflowY')
|
||||
}else{
|
||||
bodyEl.classList.remove(this.prefixCls +'-overflowY')
|
||||
}
|
||||
if(this.showHorizontalScrollBar){
|
||||
bodyEl.classList.add(this.prefixCls +'-overflowX')
|
||||
}else{
|
||||
bodyEl.classList.remove(this.prefixCls +'-overflowX')
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
|
||||
|
|
|
|||
|
|
@ -71,8 +71,15 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
&-body{
|
||||
overflow: auto;
|
||||
//overflow: auto;
|
||||
//position: relative;
|
||||
|
||||
}
|
||||
&-overflowX{
|
||||
overflow-x: scroll;
|
||||
}
|
||||
&-overflowY{
|
||||
overflow-y: scroll;
|
||||
}
|
||||
&-tip{
|
||||
overflow-x: auto;
|
||||
|
|
@ -278,7 +285,7 @@
|
|||
box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
&-fixed-header{
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
&-with-empty{
|
||||
.@{table-prefix-cls}-hidden{
|
||||
.@{table-prefix-cls}-sort{
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue