innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

fix:错行问题

This commit is contained in:
yangchch6 2019-08-17 11:36:55 +08:00
parent ca50a4c766
commit de7450e50b
4 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build/Table.js
View File

@ -462,7 +462,7 @@ var Table = function (_Component) {
this.domWidthDiff = this.contentDomWidth - this.contentWidth; this.domWidthDiff = this.contentDomWidth - this.contentWidth;
} }
if (this.computeWidth <= this.contentWidth) { if (this.computeWidth < this.contentWidth) {
var contentWidthDiff = this.scrollbarWidth ? this.contentWidth - this.computeWidth - this.scrollbarWidth : this.contentWidth - this.computeWidth; var contentWidthDiff = this.scrollbarWidth ? this.contentWidth - this.computeWidth - this.scrollbarWidth : this.contentWidth - this.computeWidth;
//bordered的表格需要减去边框的差值1 //bordered的表格需要减去边框的差值1
if (this.props.bordered) { if (this.props.bordered) {
@ -1097,7 +1097,7 @@ var Table = function (_Component) {
if (fixed) { if (fixed) {
if (this.domWidthDiff > 0) { if (this.domWidthDiff > 0) {
headStyle.overflow = 'hidden'; headStyle.overflow = 'hidden';
innerBodyStyle.overflowX = 'scroll'; //兼容expand场景、子表格含有固定列的场景 innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
} else { } else {
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px'; bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
} }

37
dist/demo.js vendored
View File

@ -34405,7 +34405,7 @@
return this.props.expandedRowKeys || this.state.expandedRowKeys; return this.props.expandedRowKeys || this.state.expandedRowKeys;
}; };
Table.prototype.getHeader = function getHeader(columns, fixed) { Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
var _props = this.props, var _props = this.props,
filterDelay = _props.filterDelay, filterDelay = _props.filterDelay,
onFilterChange = _props.onFilterChange, onFilterChange = _props.onFilterChange,
@ -34470,7 +34470,9 @@
contentDomWidth: this.contentDomWidth, contentDomWidth: this.contentDomWidth,
scrollbarWidth: this.scrollbarWidth, scrollbarWidth: this.scrollbarWidth,
headerScroll: headerScroll, headerScroll: headerScroll,
bordered: bordered bordered: bordered,
leftFixedWidth: leftFixedWidth,
rightFixedWidth: rightFixedWidth
})) : null; })) : null;
}; };
@ -34893,6 +34895,8 @@
var bodyStyle = _extends({}, this.props.bodyStyle); var bodyStyle = _extends({}, this.props.bodyStyle);
var headStyle = {}; var headStyle = {};
var innerBodyStyle = {}; var innerBodyStyle = {};
var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
var tableClassName = ''; var tableClassName = '';
//表格元素的宽度大于容器的宽度也显示滚动条 //表格元素的宽度大于容器的宽度也显示滚动条
@ -34945,7 +34949,7 @@
if (fixed) { if (fixed) {
if (this.domWidthDiff > 0) { if (this.domWidthDiff > 0) {
headStyle.overflow = 'hidden'; headStyle.overflow = 'hidden';
innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景 innerBodyStyle.overflowX = 'scroll'; //兼容expand场景、子表格含有固定列的场景
} else { } else {
bodyStyle.marginBottom = '-' + scrollbarWidth + 'px'; bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
} }
@ -34993,7 +34997,7 @@
'table', 'table',
{ className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle }, { className: ' ' + tableClassName + ' table-bordered ' + _drag_class + ' ', style: tableStyle },
_this4.getColGroup(columns, fixed), _this4.getColGroup(columns, fixed),
hasHead ? _this4.getHeader(columns, fixed) : null, hasHead ? _this4.getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) : null,
tableBody tableBody
); );
}; };
@ -35062,8 +35066,8 @@
) )
); );
} }
var leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth); // const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
var rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth); // const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
var expandIconWidth = expandIconAsCell ? 33 : 0; var expandIconWidth = expandIconAsCell ? 33 : 0;
var parStyle = {}; var parStyle = {};
if (!fixed) { if (!fixed) {
@ -37592,7 +37596,9 @@
contentTable = _this$props2.contentTable, contentTable = _this$props2.contentTable,
headerScroll = _this$props2.headerScroll, headerScroll = _this$props2.headerScroll,
lastShowIndex = _this$props2.lastShowIndex, lastShowIndex = _this$props2.lastShowIndex,
onDraggingBorder = _this$props2.onDraggingBorder; onDraggingBorder = _this$props2.onDraggingBorder,
leftFixedWidth = _this$props2.leftFixedWidth,
rightFixedWidth = _this$props2.rightFixedWidth;
_utils.Event.stopPropagation(e); _utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e); var event = _utils.Event.getEvent(e);
@ -37624,11 +37630,11 @@
_this.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头 _this.table.cols[lastShowIndex].style.width = lastWidth + "px"; //同步表头
_this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体 _this.table.tableBodyCols[lastShowIndex].style.width = lastWidth + "px"; //同步表体
} }
var showScroll = contentDomWidth - (leftFixedWidth + rightFixedWidth) - (_this.drag.tableWidth + diff) - scrollbarWidth;
var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
//表头滚动条处理 //表头滚动条处理
if (headerScroll) { if (headerScroll) {
if (showScroll < 0) { if (showScroll < 0) {
//小于 0 出现滚动条
//找到固定列表格，设置表头的marginBottom值为scrollbarWidth; //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
_this.table.contentTableHeader.style.overflowX = 'scroll'; _this.table.contentTableHeader.style.overflowX = 'scroll';
_this.optTableMargin(_this.table.fixedLeftHeaderTable, scrollbarWidth); _this.optTableMargin(_this.table.fixedLeftHeaderTable, scrollbarWidth);
@ -37637,20 +37643,20 @@
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px"); // fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】 //todo inner scroll-x去掉；outer marginbottom 设置成-15px】
} else { } else {
//大于 0 不显示滚动条
_this.table.contentTableHeader.style.overflowX = 'hidden'; _this.table.contentTableHeader.style.overflowX = 'hidden';
_this.optTableMargin(_this.table.fixedLeftHeaderTable, 0); _this.optTableMargin(_this.table.fixedLeftHeaderTable, 0);
_this.optTableMargin(_this.table.fixedRighHeadertTable, 0); _this.optTableMargin(_this.table.fixedRighHeadertTable, 0);
} }
} else { } else {
console.log('showScroll: ', showScroll);
if (showScroll < 0) { if (showScroll < 0) {
// this.optTableMargin( this.table.fixedLeftBodyTable,'-'+scrollbarWidth); _this.table.tableBody.style.overflowX = 'auto';
// this.optTableMargin( this.table.fixedRightBodyTable,'-'+scrollbarWidth); _this.optTableMargin(_this.table.fixedLeftBodyTable, '-' + scrollbarWidth);
_this.optTableMargin(_this.table.fixedLeftBodyTable, 0); _this.optTableMargin(_this.table.fixedRightBodyTable, '-' + scrollbarWidth);
_this.optTableMargin(_this.table.fixedRightBodyTable, 0);
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'scroll' }); _this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'scroll' });
_this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'scroll' }); _this.optTableScroll(_this.table.fixedRightBodyTable, { x: 'scroll' });
} else { } else {
_this.table.tableBody.style.overflowX = 'hidden';
_this.optTableMargin(_this.table.fixedLeftBodyTable, 0); _this.optTableMargin(_this.table.fixedLeftBodyTable, 0);
_this.optTableMargin(_this.table.fixedRightBodyTable, 0); _this.optTableMargin(_this.table.fixedRightBodyTable, 0);
_this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'auto' }); _this.optTableScroll(_this.table.fixedLeftBodyTable, { x: 'auto' });
@ -37701,7 +37707,7 @@
var innerTable = table.querySelector('.u-table-body-inner'); var innerTable = table.querySelector('.u-table-body-inner');
if (innerTable) { if (innerTable) {
//fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行 //fixbug: 拖拽列宽后，滚动条滚到表格底部，会导致固定列和非固定列错行
// overflow.x && (innerTable.style.overflowX = overflow.x); overflow.x && (innerTable.style.overflowX = overflow.x);
overflow.y && (innerTable.style.overflowY = overflow.y); overflow.y && (innerTable.style.overflowY = overflow.y);
} }
} }
@ -37969,6 +37975,7 @@
table.cols = tableDome.getElementsByTagName("col"); table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th"); table.ths = tableDome.getElementsByTagName("th");
table.tr = tableDome.getElementsByTagName("tr"); table.tr = tableDome.getElementsByTagName("tr");
table.tableBody = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body');
table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col"); table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
} }

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
src/Table.js
View File

@ -298,7 +298,7 @@ class Table extends Component {
this.domWidthDiff = this.contentDomWidth - this.contentWidth; this.domWidthDiff = this.contentDomWidth - this.contentWidth;
} }
if (this.computeWidth <= this.contentWidth) { if (this.computeWidth < this.contentWidth) {
let contentWidthDiff = this.scrollbarWidth?this.contentWidth - this.computeWidth-this.scrollbarWidth:this.contentWidth - this.computeWidth; let contentWidthDiff = this.scrollbarWidth?this.contentWidth - this.computeWidth-this.scrollbarWidth:this.contentWidth - this.computeWidth;
//bordered的表格需要减去边框的差值1 //bordered的表格需要减去边框的差值1
if(this.props.bordered){ if(this.props.bordered){
@ -942,7 +942,7 @@ class Table extends Component {
if(fixed){ if(fixed){
if(this.domWidthDiff > 0){ if(this.domWidthDiff > 0){
headStyle.overflow = 'hidden'; headStyle.overflow = 'hidden';
innerBodyStyle.overflowX = 'scroll'; //兼容expand场景、子表格含有固定列的场景 innerBodyStyle.overflowX = 'auto'; //兼容expand场景、子表格含有固定列的场景
}else{ }else{
bodyStyle.marginBottom = `-${scrollbarWidth}px`; bodyStyle.marginBottom = `-${scrollbarWidth}px`;
} }