含有border的表格滚动条显示问题

This commit is contained in:
wanghaoo 2018-11-08 22:46:18 +08:00
parent 91cb2e1297
commit d5b6f8072a
8 changed files with 28 additions and 12 deletions

View File

@ -408,8 +408,8 @@
top: 3px;
right: 18px;
width: 22px;
height: 30px;
line-height: 30px;
height: 25px;
line-height: 25px;
z-index: 2;
background: #f7f7f7; }
.u-table-filter-column-filter-iconi.uf {

View File

@ -275,6 +275,7 @@ var Table = function (_Component) {
};
Table.prototype.computeTableWidth = function computeTableWidth() {
//如果用户传了scroll.x按用户传的为主
var setWidthParam = this.props.scroll.x;
if (typeof setWidthParam == 'number') {
@ -295,6 +296,10 @@ var Table = function (_Component) {
this.computeWidth = computeObj.computeWidth;
if (this.computeWidth < this.contentWidth) {
var contentWidthDiff = this.scrollbarWidth ? this.contentWidth - this.computeWidth - this.scrollbarWidth : this.contentWidth - this.computeWidth;
//bordered的表格需要减去边框的差值1
if (this.props.bordered) {
contentWidthDiff = contentWidthDiff - 1;
}
this.setState({ contentWidthDiff: contentWidthDiff, lastShowIndex: lastShowIndex });
} else {
this.contentWidth = this.computeWidth;

6
dist/demo.css vendored
View File

@ -8481,7 +8481,7 @@ ul {
height: 100%;
overflow: scroll; }
.u-table-fixed-header .u-table-scroll .u-table-header {
overflow-x: scroll;
overflow-x: auto;
padding-bottom: 20px;
margin-bottom: -20px;
overflow-y: scroll;
@ -8667,8 +8667,8 @@ ul {
top: 3px;
right: 18px;
width: 22px;
height: 30px;
line-height: 30px;
height: 25px;
line-height: 25px;
z-index: 2;
background: #f7f7f7; }
.u-table-filter-column-filter-iconi.uf {

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

10
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -200,6 +200,7 @@ class Table extends Component {
}
computeTableWidth() {
//如果用户传了scroll.x按用户传的为主
let setWidthParam = this.props.scroll.x
if (typeof (setWidthParam) == 'number') {
@ -220,6 +221,10 @@ class Table extends Component {
this.computeWidth = computeObj.computeWidth;
if (this.computeWidth < this.contentWidth) {
let contentWidthDiff = this.scrollbarWidth?this.contentWidth - this.computeWidth-this.scrollbarWidth:this.contentWidth - this.computeWidth;
//bordered的表格需要减去边框的差值1
if(this.props.bordered){
contentWidthDiff = contentWidthDiff-1;
}
this.setState({ contentWidthDiff, lastShowIndex });
} else {
this.contentWidth = this.computeWidth;

View File

@ -123,7 +123,7 @@ $table-move-in-color: $bg-color-base;
&-fixed-header &-scroll &-header {
overflow-x: scroll;
overflow-x: auto;
padding-bottom: 20px;
margin-bottom: -20px;
overflow-y: scroll;
@ -408,8 +408,8 @@ $table-move-in-color: $bg-color-base;
top: 3px;
right: 18px;
width: 22px;
height: 30px;
line-height: 30px;
height: 25px;
line-height: 25px;
z-index: 2;
background: #f7f7f7;
&i.uf{