修改示例

This commit is contained in:
jonyshi 2019-06-26 16:37:41 +08:00
parent 54b1aa0084
commit 7d3d5254a1
3 changed files with 45 additions and 10 deletions

View File

@ -153,6 +153,13 @@
.u-loading.u-loading-line.u-loading-line-warning > div { .u-loading.u-loading-line.u-loading-line-warning > div {
background-color: #ff9800; } background-color: #ff9800; }
.u-loading.u-loading-custom > div {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
@keyframes line-scale { @keyframes line-scale {
0% { 0% {
-webkit-transform: scaley(1); -webkit-transform: scaley(1);

View File

@ -77,7 +77,8 @@ var TableHeader = function (_Component) {
targetEvent = _utils.Event.getTarget(event); targetEvent = _utils.Event.getTarget(event);
var _this$props = _this.props, var _this$props = _this.props,
clsPrefix = _this$props.clsPrefix, clsPrefix = _this$props.clsPrefix,
contentTable = _this$props.contentTable; contentTable = _this$props.contentTable,
lastShowIndex = _this$props.lastShowIndex;
var currentElement = _this.getOnLineObject(targetEvent); var currentElement = _this.getOnLineObject(targetEvent);
if (!currentElement) return; if (!currentElement) return;
@ -95,6 +96,14 @@ var TableHeader = function (_Component) {
_this.drag.oldWidth = parseInt(currentObj.style.width); _this.drag.oldWidth = parseInt(currentObj.style.width);
_this.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth; _this.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
_this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth); _this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
console.log(" ----- ", _this.drag);
if (!_this.tableOldWidth) {
_this.tableOldWidth = _this.drag.tableWidth; //this.getTableWidth();
// console.log(" this.tableOldWidth--- ",this.tableOldWidth);
}
if (!_this.lastColumWidth) {
_this.lastColumWidth = parseInt(_this.table.cols[lastShowIndex].style.width);
}
} else if (type != 'online' && _this.props.draggable) { } else if (type != 'online' && _this.props.draggable) {
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; // if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
if (!_this.props.draggable) return; if (!_this.props.draggable) return;
@ -110,6 +119,16 @@ var TableHeader = function (_Component) {
} }
}; };
_this.getTableWidth = function () {
var tableWidth = 0,
offWidth = 0; //this.table.cols.length;
for (var index = 0; index < _this.table.cols.length; index++) {
var da = _this.table.cols[index];
tableWidth += parseInt(da.style.width);
}
return tableWidth - offWidth;
};
_this.getTargetToTh = function (targetEvent) { _this.getTargetToTh = function (targetEvent) {
var th = targetEvent; var th = targetEvent;
if (targetEvent.nodeName.toUpperCase() != "TH") { if (targetEvent.nodeName.toUpperCase() != "TH") {
@ -127,7 +146,8 @@ var TableHeader = function (_Component) {
contentDomWidth = _this$props2.contentDomWidth, contentDomWidth = _this$props2.contentDomWidth,
scrollbarWidth = _this$props2.scrollbarWidth, scrollbarWidth = _this$props2.scrollbarWidth,
contentTable = _this$props2.contentTable, contentTable = _this$props2.contentTable,
headerScroll = _this$props2.headerScroll; headerScroll = _this$props2.headerScroll,
lastShowIndex = _this$props2.lastShowIndex;
_utils.Event.stopPropagation(e); _utils.Event.stopPropagation(e);
var event = _utils.Event.getEvent(e); var event = _utils.Event.getEvent(e);
@ -145,14 +165,21 @@ var TableHeader = function (_Component) {
if (_this.fixedTable.cols) { if (_this.fixedTable.cols) {
_this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px"; _this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
} }
var newTableWidth = _this.drag.tableWidth + diff + 'px';
_this.table.table.style.width = newTableWidth; //改变table的width
if (_this.table.innerTableBody) {
//TODO 后续需要处理此处
_this.table.innerTableBody.style.width = newTableWidth;
}
var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
// 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) {
//缩小
var lastWidth = _this.lastColumWidth + newDiff;
_this.table.cols[lastShowIndex].style.width = lastWidth + "px";
}
var showScroll = contentDomWidth - (_this.drag.tableWidth + diff) - scrollbarWidth;
//表头滚动条处理 //表头滚动条处理
if (headerScroll) { if (headerScroll) {
if (showScroll < 0) { if (showScroll < 0) {
@ -440,6 +467,7 @@ var TableHeader = function (_Component) {
_this.table = null; _this.table = null;
_this._thead = null; //当前对象 _this._thead = null; //当前对象
_this.event = false; //避免多次绑定问题 _this.event = false; //避免多次绑定问题
_this.lastColumWidth = null; //非固定列最后一列的初始化宽度
return _this; return _this;
} }

View File

@ -1,6 +1,6 @@
{ {
"name": "bee-table", "name": "bee-table",
"version": "2.1.3-beta.2", "version": "2.1.4-alpha.1",
"description": "Table ui component for react", "description": "Table ui component for react",
"keywords": [ "keywords": [
"react", "react",