Merge pull request #3178 from huanghong1125/2.0
fixed table scrollbar bug
This commit is contained in:
Aresn
GitHub
commit
a00e989ba3
5 changed files with 203 additions and 27 deletions
|
|
@ -1,18 +1,32 @@
|
|||
<template>
|
||||
<div>
|
||||
<Table border ref="selection" :columns="columns4" :data="data1"></Table>
|
||||
<Table border ref="selection" :columns="columns4" :data="data1" :height='258'></Table>
|
||||
<Button @click="handleSetData">Set Data</Button>
|
||||
<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 :data="tableData1" :columns="tableColumns1" style="width: 100%;" stripe></Table>
|
||||
<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 :width='600' border :columns="columns2" :data="data3"></Table>
|
||||
</div>
|
||||
<div style='margin:20px 0px'>
|
||||
<Table :width='600' :height='200' border :columns="columns2" :data="data3"></Table>
|
||||
</div>
|
||||
<div style='margin:20px 0px;'>
|
||||
Table scrolling <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
|
||||
<Table :data="tableData1" :columns="tableColumns1" :height="fixedHeader ? 250 : ''" stripe size='small'></Table>
|
||||
<div style="margin: 10px;overflow: hidden">
|
||||
<div style="float: right;">
|
||||
<Page :total="100" show-sizer :current="1" @on-change="changePage"></Page>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -27,7 +41,8 @@
|
|||
},
|
||||
{
|
||||
title: 'Name',
|
||||
key: 'name'
|
||||
key: 'name',
|
||||
width: 260
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
|
|
@ -35,13 +50,110 @@
|
|||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address'
|
||||
key: 'address',
|
||||
width: 260
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
width: 260
|
||||
}
|
||||
],
|
||||
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,
|
||||
fixed: 'right',
|
||||
},
|
||||
{
|
||||
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
|
||||
}
|
||||
],
|
||||
|
||||
fixedHeader: false,
|
||||
tableData1: [],
|
||||
tableColumns1: [
|
||||
{
|
||||
|
|
@ -65,7 +177,7 @@
|
|||
key: 'data5'
|
||||
},
|
||||
{
|
||||
title: 'Data6',
|
||||
title: 'Data6Data6Data6Data6Data6Data6Data6Data6Data6Data6Data6',
|
||||
key: 'data6'
|
||||
},
|
||||
]
|
||||
|
|
@ -118,7 +230,7 @@
|
|||
data3: Math.floor(Math.random () * 100000000),
|
||||
data4: Math.floor(Math.random () * Math.random () * 10000),
|
||||
data5: Math.floor(Math.random () * Math.random () * 1000000),
|
||||
data6: Math.floor(Math.random () * Math.random () * 100000000),
|
||||
data6: ''+Math.floor(Math.random () * Math.random () * 100000000)+Math.floor(Math.random () * 100000000)+Math.floor(Math.random () * 100000000),
|
||||
});
|
||||
}
|
||||
this.tableData1 = data;
|
||||
|
|
|
|||
|
|
@ -25,13 +25,19 @@ export default {
|
|||
width = this.columnsWidth[column._index].width;
|
||||
}
|
||||
// when browser has scrollBar,set a width to resolve scroll position bug
|
||||
if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0) {
|
||||
width += this.$parent.scrollBarWidth;
|
||||
if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0 && column.fixed!=='left' && !this.fixed) {
|
||||
let scrollBarWidth = this.$parent.scrollBarWidth;
|
||||
if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
|
||||
width += scrollBarWidth;
|
||||
}
|
||||
// when fixed type,reset first right fixed column's width
|
||||
if (this.fixed === 'right') {
|
||||
const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
|
||||
if (firstFixedIndex === index) width += this.$parent.scrollBarWidth;
|
||||
if (this.fixed === 'right' && top ) {
|
||||
//const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
|
||||
if (this.columns.length === index + 1) {
|
||||
let scrollBarWidth = this.$parent.scrollBarWidth;
|
||||
if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
|
||||
width += scrollBarWidth;
|
||||
}
|
||||
}
|
||||
if (width === '0') width = '';
|
||||
return width;
|
||||
|
|
|
|||
|
|
@ -87,7 +87,12 @@
|
|||
computed: {
|
||||
styles () {
|
||||
const style = Object.assign({}, this.styleObject);
|
||||
const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + this.$parent.scrollBarWidth;
|
||||
let scrollBarWidth = this.$parent.scrollBarWidth;
|
||||
if(!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
|
||||
|
||||
let isLeftFixed = this.$el && this.$el.parentElement.className.indexOf('fixed-header')>0;
|
||||
if(isLeftFixed) scrollBarWidth = 0;
|
||||
const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth;
|
||||
style.width = `${width}px`;
|
||||
return style;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -23,12 +23,12 @@
|
|||
:obj-data="objData"></table-body>
|
||||
</div>
|
||||
<div
|
||||
:class="[prefixCls + '-tip']"
|
||||
:class="[prefixCls + '-tip']" :style="bodyStyle" @scroll="handleBodyScroll"
|
||||
v-show="((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
|
||||
<table cellspacing="0" cellpadding="0" border="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td :style="{ 'height': bodyStyle.height }">
|
||||
<td :style="{'height':bodyStyle.height,'width':`${this.headerWidth}px`}">
|
||||
<span v-html="localeNoDataText" v-if="!data || data.length === 0"></span>
|
||||
<span v-html="localeNoFilteredDataText" v-else></span>
|
||||
</td>
|
||||
|
|
@ -186,7 +186,10 @@
|
|||
bodyRealHeight: 0,
|
||||
scrollBarWidth: getScrollBarSize(),
|
||||
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
|
||||
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
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -252,7 +255,7 @@
|
|||
if (this.bodyHeight > this.bodyRealHeight) {
|
||||
width = this.tableWidth;
|
||||
} else {
|
||||
width = this.tableWidth - this.scrollBarWidth;
|
||||
width = this.tableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
|
||||
}
|
||||
}
|
||||
// const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
|
||||
|
|
@ -275,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 () {
|
||||
|
|
@ -291,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`;
|
||||
|
|
@ -310,7 +314,7 @@
|
|||
if (col.fixed && col.fixed === 'left') {
|
||||
left.push(col);
|
||||
} else {
|
||||
other.push(col);
|
||||
//other.push(col);
|
||||
}
|
||||
});
|
||||
return left.concat(other);
|
||||
|
|
@ -322,7 +326,7 @@
|
|||
if (col.fixed && col.fixed === 'right') {
|
||||
right.push(col);
|
||||
} else {
|
||||
other.push(col);
|
||||
//other.push(col);
|
||||
}
|
||||
});
|
||||
return right.concat(other);
|
||||
|
|
@ -347,7 +351,13 @@
|
|||
this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
|
||||
}
|
||||
this.columnsWidth = {};
|
||||
if (!this.$refs.tbody) return;
|
||||
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;
|
||||
|
|
@ -357,7 +367,6 @@
|
|||
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];
|
||||
|
||||
|
|
@ -374,6 +383,36 @@
|
|||
};
|
||||
}
|
||||
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<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
|
||||
|
|
@ -478,6 +517,7 @@
|
|||
}
|
||||
this.$emit('on-selection-change', selection);
|
||||
},
|
||||
|
||||
fixedHeader () {
|
||||
if (this.height) {
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -795,6 +835,7 @@
|
|||
deep: true
|
||||
},
|
||||
height () {
|
||||
this.handleResize();
|
||||
this.fixedHeader();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,19 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
&-body{
|
||||
overflow: auto;
|
||||
//overflow: auto;
|
||||
//position: relative;
|
||||
|
||||
}
|
||||
&-overflowX{
|
||||
overflow-x: scroll;
|
||||
}
|
||||
&-overflowY{
|
||||
overflow-y: scroll;
|
||||
}
|
||||
&-tip{
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
//position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -273,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