forgetest5
/
bee-table6
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix:嵌套表格，expandIconAsCell={true}时，拖拽列宽度，被调整的总是前一列

This commit is contained in:
yangchch6 2019-12-04 17:55:17 +08:00
parent 71e907a8c9
commit c672fc1808
6 changed files with 40 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
build/Table.js
View File

@ -200,6 +200,14 @@ var Table = function (_Component) {
};
_this.getColumnsChildrenList = function (columns) {
var expandIconAsCell = _this.props.expandIconAsCell;
if (expandIconAsCell) {
_this.columnsChildrenList.push({
className: "u-table-expand-icon-column",
key: "expand-icon"
});
}
columns.forEach(function (da) {
da.children ? _this.getColumnsChildrenList(da.children) : _this.columnsChildrenList.push(da);
});
@ -590,6 +598,7 @@ var Table = function (_Component) {
Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
var lastShowIndex = this.state.lastShowIndex;
var _props = this.props,
filterDelay = _props.filterDelay,
onFilterChange = _props.onFilterChange,
@ -641,7 +650,7 @@ var Table = function (_Component) {
minColumnWidth: minColumnWidth,
contentWidthDiff: contentWidthDiff,
contentWidth: this.contentWidth,
lastShowIndex: this.state.lastShowIndex,
lastShowIndex: expandIconAsCell ? parseInt(lastShowIndex) + 1 : lastShowIndex,
clsPrefix: clsPrefix,
rows: rows,
contentTable: this.contentTable,

22
build/TableHeader.js
View File

@ -552,7 +552,8 @@ var _initialiseProps = function _initialiseProps() {
if (type == 'online' && _this7.props.dragborder) {
if (!_this7.props.dragborder) return;
targetEvent.setAttribute('draggable', false); //添加交换列效果
var currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
// let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
var currentIndex = -1;
var defaultWidth = currentElement.getAttribute("data-th-width");
_this7.drag.option = "border"; //拖拽操作
if (columnsChildrenList) {
@ -640,7 +641,6 @@ var _initialiseProps = function _initialiseProps() {
var diff = event.x - _this7.drag.oldLeft;
var newWidth = _this7.drag.oldWidth + diff;
_this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
// if(newWidth > this.drag.minWidth){
if (newWidth > _this7.minWidth) {
currentCols.style.width = newWidth + 'px';
//hao 支持固定表头拖拽 修改表体的width
@ -648,13 +648,6 @@ var _initialiseProps = function _initialiseProps() {
_this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px";
}
// const newTableWidth = this.drag.tableWidth + diff;// +'px';
// this.table.table.style.width = newTableWidth+'px';;//改变table的width
// if(this.table.innerTableBody){//TODO 后续需要处理此处
// this.table.innerTableBody.style.width = newTableWidth+'px';
// }
var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
if (newDiff > 0) {
//缩小
@ -671,9 +664,6 @@ var _initialiseProps = function _initialiseProps() {
_this7.table.contentTableHeader.style.overflowX = 'scroll';
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, scrollbarWidth);
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, scrollbarWidth);
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
} else {
//大于 0 不显示滚动条
_this7.table.contentTableHeader.style.overflowX = 'hidden';
@ -698,12 +688,8 @@ var _initialiseProps = function _initialiseProps() {
} else {
_this7.drag.newWidth = _this7.minWidth;
}
} else if (_this7.props.draggable && _this7.drag.option == "draggable") {
// console.log(" --onTrMouseMove--draggable- ",this.drag.option);
} else {}
// console.log("onTrMouseMove dragborder or draggable is all false !");
// 增加拖拽列宽动作的回调函数
}
// 增加拖拽列宽动作的回调函数
_this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth);
};

33
dist/demo.js vendored
View File

@ -37219,6 +37219,14 @@
};
_this.getColumnsChildrenList = function (columns) {
var expandIconAsCell = _this.props.expandIconAsCell;
if (expandIconAsCell) {
_this.columnsChildrenList.push({
className: "u-table-expand-icon-column",
key: "expand-icon"
});
}
columns.forEach(function (da) {
da.children ? _this.getColumnsChildrenList(da.children) : _this.columnsChildrenList.push(da);
});
@ -37609,6 +37617,7 @@
Table.prototype.getHeader = function getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
var lastShowIndex = this.state.lastShowIndex;
var _props = this.props,
filterDelay = _props.filterDelay,
onFilterChange = _props.onFilterChange,
@ -37660,7 +37669,7 @@
minColumnWidth: minColumnWidth,
contentWidthDiff: contentWidthDiff,
contentWidth: this.contentWidth,
lastShowIndex: this.state.lastShowIndex,
lastShowIndex: expandIconAsCell ? parseInt(lastShowIndex) + 1 : lastShowIndex,
clsPrefix: clsPrefix,
rows: rows,
contentTable: this.contentTable,
@ -52154,7 +52163,8 @@
if (type == 'online' && _this7.props.dragborder) {
if (!_this7.props.dragborder) return;
targetEvent.setAttribute('draggable', false); //添加交换列效果
var currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
// let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
var currentIndex = -1;
var defaultWidth = currentElement.getAttribute("data-th-width");
_this7.drag.option = "border"; //拖拽操作
if (columnsChildrenList) {
@ -52242,7 +52252,6 @@
var diff = event.x - _this7.drag.oldLeft;
var newWidth = _this7.drag.oldWidth + diff;
_this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
// if(newWidth > this.drag.minWidth){
if (newWidth > _this7.minWidth) {
currentCols.style.width = newWidth + 'px';
//hao 支持固定表头拖拽 修改表体的width
@ -52250,13 +52259,6 @@
_this7.fixedTable.cols[_this7.drag.currIndex].style.width = newWidth + "px";
}
// const newTableWidth = this.drag.tableWidth + diff;// +'px';
// this.table.table.style.width = newTableWidth+'px';;//改变table的width
// if(this.table.innerTableBody){//TODO 后续需要处理此处
// this.table.innerTableBody.style.width = newTableWidth+'px';
// }
var newDiff = parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width);
if (newDiff > 0) {
//缩小
@ -52273,9 +52275,6 @@
_this7.table.contentTableHeader.style.overflowX = 'scroll';
_this7.optTableMargin(_this7.table.fixedLeftHeaderTable, scrollbarWidth);
_this7.optTableMargin(_this7.table.fixedRighHeadertTable, scrollbarWidth);
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
} else {
//大于 0 不显示滚动条
_this7.table.contentTableHeader.style.overflowX = 'hidden';
@ -52300,12 +52299,8 @@
} else {
_this7.drag.newWidth = _this7.minWidth;
}
} else if (_this7.props.draggable && _this7.drag.option == "draggable") {
// console.log(" --onTrMouseMove--draggable- ",this.drag.option);
} else {}
// console.log("onTrMouseMove dragborder or draggable is all false !");
// 增加拖拽列宽动作的回调函数
}
// 增加拖拽列宽动作的回调函数
_this7.drag.newWidth && onDraggingBorder && onDraggingBorder(event, _this7.drag.newWidth);
};

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

10
src/Table.js
View File

@ -424,12 +424,20 @@ class Table extends Component {
//todo 后续改进
getColumnsChildrenList = (columns)=>{
const { expandIconAsCell } = this.props;
if(expandIconAsCell){
this.columnsChildrenList.push({
className: "u-table-expand-icon-column",
key: "expand-icon"
})
}
columns.forEach(da=>{
da.children?this.getColumnsChildrenList(da.children):this.columnsChildrenList.push(da);
})
}
getHeader(columns, fixed, leftFixedWidth, rightFixedWidth) {
const { lastShowIndex } = this.state;
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop,onDragEnd, draggable,
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered,onDropBorder,onDraggingBorder} = this.props;
const rows = this.getHeaderRows(columns);
@ -458,7 +466,7 @@ class Table extends Component {
minColumnWidth={minColumnWidth}
contentWidthDiff={contentWidthDiff}
contentWidth={this.contentWidth}
lastShowIndex={this.state.lastShowIndex}
lastShowIndex={expandIconAsCell ? parseInt(lastShowIndex) + 1 : lastShowIndex}
clsPrefix={clsPrefix}
rows={rows}
contentTable={this.contentTable}

18
src/TableHeader.js
View File

@ -225,7 +225,8 @@ class TableHeader extends Component {
if(type == 'online' && this.props.dragborder){
if(!this.props.dragborder)return;
targetEvent.setAttribute('draggable',false);//添加交换列效果
let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
// let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
let currentIndex = -1;
let defaultWidth = currentElement.getAttribute("data-th-width");
this.drag.option = "border";//拖拽操作
if(columnsChildrenList){
@ -311,7 +312,6 @@ class TableHeader extends Component {
let diff = (event.x - this.drag.oldLeft);
let newWidth = this.drag.oldWidth + diff;
this.drag.newWidth = newWidth > 0 ? newWidth : this.minWidth;
// if(newWidth > this.drag.minWidth){
if(newWidth > this.minWidth){
currentCols.style.width = newWidth +'px';
//hao 支持固定表头拖拽 修改表体的width
@ -319,13 +319,6 @@ class TableHeader extends Component {
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
}
// const newTableWidth = this.drag.tableWidth + diff;// +'px';
// this.table.table.style.width = newTableWidth+'px';;//改变table的width
// if(this.table.innerTableBody){//TODO 后续需要处理此处
// this.table.innerTableBody.style.width = newTableWidth+'px';
// }
let newDiff = (parseInt(currentCols.style.minWidth) - parseInt(currentCols.style.width));
if(newDiff > 0){//缩小
let lastWidth = this.lastColumWidth + newDiff;
@ -340,9 +333,6 @@ class TableHeader extends Component {
this.table.contentTableHeader.style.overflowX = 'scroll';
this.optTableMargin( this.table.fixedLeftHeaderTable,scrollbarWidth);
this.optTableMargin( this.table.fixedRighHeadertTable,scrollbarWidth);
// fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
// fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
//todo inner scroll-x去掉；outer marginbottom 设置成-15px】
}else{ //大于 0 不显示滚动条
this.table.contentTableHeader.style.overflowX = 'hidden';
this.optTableMargin( this.table.fixedLeftHeaderTable,0);
@ -366,10 +356,6 @@ class TableHeader extends Component {
}else {
this.drag.newWidth = this.minWidth;
}
}else if(this.props.draggable && this.drag.option == "draggable"){
// console.log(" --onTrMouseMove--draggable- ",this.drag.option);
}else{
// console.log("onTrMouseMove dragborder or draggable is all false !");
}
// 增加拖拽列宽动作的回调函数
this.drag.newWidth && onDraggingBorder && onDraggingBorder(event, this.drag.newWidth);