feat(bee-table): 子表数据减少时，动态计算高度
This commit is contained in:
liushaozhen
parent
fdc12b3d12
commit
a4df9cef69
|
|
@ -272,6 +272,14 @@ var Table = function (_Component) {
|
|||
);
|
||||
};
|
||||
|
||||
_this.getTdPadding = function (td) {
|
||||
var tdPaddingTop = _this.getStyle(td, 'paddingTop'),
|
||||
tdPaddingBottom = _this.getStyle(td, 'paddingBottom'),
|
||||
tdBorderTop = _this.getStyle(td, 'borderTopWidth'),
|
||||
tdBorderBottom = _this.getStyle(td, 'borderBottomWidth');
|
||||
return Number(tdPaddingTop.replace('px', '')) + Number(tdPaddingBottom.replace('px', '')) + Number(tdBorderTop.replace('px', '')) + Number(tdBorderBottom.replace('px', ''));
|
||||
};
|
||||
|
||||
_this.onRowHoverMouseEnter = function () {
|
||||
|
||||
_this.store.setState({
|
||||
|
|
@ -943,6 +951,8 @@ var Table = function (_Component) {
|
|||
if (rootIndex == -1) {
|
||||
index = i + lazyParentIndex;
|
||||
}
|
||||
console.log('preHeight', props.preHeight);
|
||||
console.log('height: ', height);
|
||||
rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
|
||||
indent: indent,
|
||||
indentSize: props.indentSize,
|
||||
|
|
@ -1364,7 +1374,17 @@ var Table = function (_Component) {
|
|||
return null;
|
||||
};
|
||||
|
||||
Table.prototype.getStyle = function getStyle(obj, attr) {
|
||||
if (obj.currentStyle) {
|
||||
return obj.currentStyle[attr];
|
||||
} else {
|
||||
return document.defaultView.getComputedStyle(obj, null)[attr];
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.syncFixedTableRowHeight = function syncFixedTableRowHeight() {
|
||||
var _this5 = this;
|
||||
|
||||
//this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
|
||||
var _props9 = this.props,
|
||||
clsPrefix = _props9.clsPrefix,
|
||||
|
|
@ -1413,6 +1433,13 @@ var Table = function (_Component) {
|
|||
expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows, function (row) {
|
||||
var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
|
||||
height = row && row.getBoundingClientRect().height || 'auto';
|
||||
try {
|
||||
//子表数据减少时，动态计算高度
|
||||
var td = row.querySelector('td');
|
||||
var tdPadding = _this5.getTdPadding(td);
|
||||
var trueheight = row.querySelectorAll('.u-table')[0].getBoundingClientRect().height;
|
||||
height = trueheight + tdPadding;
|
||||
} catch (error) {}
|
||||
fixedColumnsExpandedRowsHeight[parentRowKey] = height;
|
||||
});
|
||||
if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
|
||||
|
|
@ -1435,10 +1462,10 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.findExpandedRow = function findExpandedRow(record, index) {
|
||||
var _this5 = this;
|
||||
var _this6 = this;
|
||||
|
||||
var rows = this.getExpandedRows().filter(function (i) {
|
||||
return i === _this5.getRowKey(record, index);
|
||||
return i === _this6.getRowKey(record, index);
|
||||
});
|
||||
return rows[0];
|
||||
};
|
||||
|
|
@ -1566,7 +1593,7 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.render = function render() {
|
||||
var _this6 = this;
|
||||
var _this7 = this;
|
||||
|
||||
var props = this.props;
|
||||
var clsPrefix = props.clsPrefix;
|
||||
|
|
@ -1613,7 +1640,7 @@ var Table = function (_Component) {
|
|||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: className, style: props.style, ref: function ref(el) {
|
||||
return _this6.contentTable = el;
|
||||
return _this7.contentTable = el;
|
||||
},
|
||||
tabIndex: props.focusable && (props.tabIndex ? props.tabIndex : '0') },
|
||||
this.getTitle(),
|
||||
|
|
@ -1645,7 +1672,7 @@ var Table = function (_Component) {
|
|||
'div',
|
||||
{ className: 'u-row-hover',
|
||||
onMouseEnter: this.onRowHoverMouseEnter, onMouseLeave: this.onRowHoverMouseLeave, ref: function ref(el) {
|
||||
return _this6.hoverDom = el;
|
||||
return _this7.hoverDom = el;
|
||||
} },
|
||||
props.hoverContent()
|
||||
)
|
||||
|
|
|
|||
|
|
@ -907,241 +907,4 @@
|
|||
background: #344563;
|
||||
border-color: #505F79; }
|
||||
|
||||
.demo04.u-table tr:nth-child(2n) {
|
||||
background: #f7f9fb; }
|
||||
|
||||
.demo04.u-table tr.u-table-row-hover, .demo04 .u-table tr:hover {
|
||||
background: #ebecf0; }
|
||||
|
||||
.demo22 .opt-btns {
|
||||
margin-bottom: 8px; }
|
||||
|
||||
.demo32 .u-table-thead th {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px; }
|
||||
|
||||
.demo0501 .u-table .u-row-hover .opt-btns button, .demo0501 .u-table .u-row-hover .cancel-btns button {
|
||||
margin: 0; }
|
||||
.demo0501 .u-table .u-row-hover .opt-btns button:first-child, .demo0501 .u-table .u-row-hover .cancel-btns button:first-child {
|
||||
margin-right: 8px; }
|
||||
|
||||
.demo0501 .u-table .u-table-row td {
|
||||
padding: 5px 8px; }
|
||||
.demo0501 .u-table .u-table-row td input {
|
||||
font-size: 12px;
|
||||
padding-left: 5px; }
|
||||
|
||||
.demo0501 .u-table .u-table-row .u-form-control,
|
||||
.demo0501 .u-table .u-table-row .u-select-selection {
|
||||
height: 30px; }
|
||||
|
||||
.demo0501 .u-table .editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px; }
|
||||
|
||||
.demo0501 .u-table .required {
|
||||
margin-left: 10px;
|
||||
position: relative; }
|
||||
.demo0501 .u-table .required::before {
|
||||
content: " ";
|
||||
border: 1px solid #F44336;
|
||||
width: 0;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -8px; }
|
||||
.demo0501 .u-table .required span.u-input-group {
|
||||
display: block; }
|
||||
|
||||
.demo0501 .u-table .verify-cell {
|
||||
padding-right: 25px !important; }
|
||||
|
||||
.demo0501 .u-table .required-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px; }
|
||||
|
||||
.demo0501 .u-table .ref-input-wrap {
|
||||
width: 160px !important; }
|
||||
|
||||
.u-editable-table-tp .tp-content {
|
||||
color: #F44336; }
|
||||
|
||||
.u-editable-table .u-table .u-table-row td {
|
||||
padding: 5px 8px; }
|
||||
.u-editable-table .u-table .u-table-row td input {
|
||||
padding-left: 5px;
|
||||
font-size: 12px; }
|
||||
.u-editable-table .u-table .u-table-row td input.error {
|
||||
border-color: #F44336; }
|
||||
|
||||
.u-editable-table .u-table .u-table-row .editable-cell {
|
||||
height: 30px; }
|
||||
|
||||
.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {
|
||||
line-height: 19px; }
|
||||
|
||||
.u-editable-table .u-table .u-table-row .u-form-control,
|
||||
.u-editable-table .u-table .u-table-row .u-select-selection {
|
||||
height: 30px; }
|
||||
|
||||
.u-editable-table .u-table .editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px; }
|
||||
|
||||
.u-editable-table .u-table .editable-cell-input-wrapper {
|
||||
padding-right: 0; }
|
||||
.u-editable-table .u-table .editable-cell-input-wrapper .ref-input-wrap {
|
||||
width: auto !important;
|
||||
height: 30px; }
|
||||
.u-editable-table .u-table .editable-cell-input-wrapper .ref-input-wrap .u-input-group {
|
||||
display: inline-block; }
|
||||
|
||||
.u-editable-table .u-table .verify-cell {
|
||||
padding-right: 25px !important; }
|
||||
|
||||
.u-editable-table .u-table .require {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px; }
|
||||
|
||||
.u-editable-table-tp .tp-content {
|
||||
color: #F44336; }
|
||||
|
||||
.demo0503-m-b.u-modal .u-modal-body {
|
||||
padding: 16px 0;
|
||||
background: #f7f9fb; }
|
||||
|
||||
.demo0503-m-b .u-form-group {
|
||||
overflow: hidden; }
|
||||
|
||||
.demo0503-m-b .u-form-control {
|
||||
font-size: 12px; }
|
||||
|
||||
.demo0503-m-b .editable-cell {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 265px;
|
||||
padding-right: 25px; }
|
||||
|
||||
.demo0503-m-b .ref-input-wrap {
|
||||
width: 240px !important; }
|
||||
|
||||
.demo0503-m-b .u-label {
|
||||
display: block;
|
||||
float: left;
|
||||
text-align: right;
|
||||
width: 110px;
|
||||
box-sizing: border-box;
|
||||
padding-right: 10px;
|
||||
font-size: 12px;
|
||||
height: 32px;
|
||||
line-height: 32px; }
|
||||
.demo0503-m-b .u-label .mast {
|
||||
padding: 0;
|
||||
color: red; }
|
||||
|
||||
.demo0503-m-b .required-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px; }
|
||||
|
||||
.u-editable-table-tp {
|
||||
z-index: 9999 !important; }
|
||||
.u-editable-table-tp .tp-content {
|
||||
color: #F44336; }
|
||||
|
||||
.ref-core-button .u-button:first-child {
|
||||
margin-right: 8px; }
|
||||
|
||||
.demo0505 .toolbar-btns {
|
||||
margin-bottom: 8px; }
|
||||
.demo0505 .toolbar-btns .u-button:first-child {
|
||||
margin-right: 8px; }
|
||||
|
||||
.demo0505 .u-table .u-row-select {
|
||||
background-color: #FFF7E7; }
|
||||
|
||||
.demo0505 .u-table .u-table-row td {
|
||||
padding: 5px 8px; }
|
||||
.demo0505 .u-table .u-table-row td input {
|
||||
font-size: 12px;
|
||||
padding-left: 5px; }
|
||||
|
||||
.demo0505 .u-table .u-table-row .u-form-control,
|
||||
.demo0505 .u-table .u-table-row .u-select-selection {
|
||||
height: 30px; }
|
||||
|
||||
.demo0505 .u-table .editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px; }
|
||||
|
||||
.demo0505 .u-table .required {
|
||||
margin-left: 10px;
|
||||
position: relative; }
|
||||
.demo0505 .u-table .required::before {
|
||||
content: " ";
|
||||
border: 1px solid #F44336;
|
||||
width: 0;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -8px; }
|
||||
.demo0505 .u-table .required span.u-input-group {
|
||||
display: block; }
|
||||
|
||||
.demo0505 .u-table .verify-cell {
|
||||
padding-right: 25px !important; }
|
||||
|
||||
.demo0505 .u-table .edited::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #f44336 transparent transparent #f44336; }
|
||||
|
||||
.demo0505 .u-table .required-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px; }
|
||||
|
||||
.demo0505 .u-table .ref-input-wrap {
|
||||
width: 160px !important; }
|
||||
|
||||
.u-editable-table-tp .tp-content {
|
||||
color: #F44336; }
|
||||
|
||||
th .drop-menu .uf {
|
||||
font-size: 12px;
|
||||
visibility: hidden;
|
||||
margin-left: 15px; }
|
||||
|
||||
th:hover .uf {
|
||||
visibility: visible; }
|
||||
|
||||
.expanded-table .expand-icon-con .uf {
|
||||
font-size: 12px; }
|
||||
|
||||
|
||||
.demo8 .u-table {
|
||||
margin-bottom: 11px; }
|
||||
|
||||
.demo8 .u-pagination {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center; }
|
||||
|
||||
/*# sourceMappingURL=demo.css.map */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.2.46",
|
||||
"version": "2.2.47",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
|||
24
src/Table.js
24
src/Table.js
|
|
@ -783,6 +783,8 @@ class Table extends Component {
|
|||
if(rootIndex ==-1){
|
||||
index = i+lazyParentIndex
|
||||
}
|
||||
console.log('preHeight',props.preHeight)
|
||||
console.log('height: ',height)
|
||||
rst.push(
|
||||
<TableRow
|
||||
indent={indent}
|
||||
|
|
@ -1167,6 +1169,20 @@ class Table extends Component {
|
|||
}
|
||||
return null;
|
||||
}
|
||||
getStyle(obj,attr){
|
||||
if(obj.currentStyle){
|
||||
return obj.currentStyle[attr];
|
||||
}
|
||||
else{
|
||||
return document.defaultView.getComputedStyle(obj,null)[attr];
|
||||
}
|
||||
}
|
||||
getTdPadding=(td)=>{
|
||||
let tdPaddingTop = this.getStyle(td,'paddingTop'),tdPaddingBottom = this.getStyle(td,'paddingBottom'),
|
||||
tdBorderTop = this.getStyle(td,'borderTopWidth'),tdBorderBottom = this.getStyle(td,'borderBottomWidth');
|
||||
return Number(tdPaddingTop.replace('px',''))+Number(tdPaddingBottom.replace('px',''))+Number(tdBorderTop.replace('px',''))+Number(tdBorderBottom.replace('px',''))
|
||||
|
||||
}
|
||||
|
||||
syncFixedTableRowHeight() {
|
||||
//this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
|
||||
|
|
@ -1212,6 +1228,14 @@ class Table extends Component {
|
|||
expandedRows.length > 0 && Array.prototype.forEach.call(expandedRows,row => {
|
||||
let parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
|
||||
height = row && row.getBoundingClientRect().height || 'auto';
|
||||
try {//子表数据减少时，动态计算高度
|
||||
let td = row.querySelector('td');
|
||||
let tdPadding = this.getTdPadding(td);
|
||||
let trueheight = row.querySelectorAll('.u-table')[0].getBoundingClientRect().height;
|
||||
height = trueheight+tdPadding;
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
fixedColumnsExpandedRowsHeight[parentRowKey] = height;
|
||||
})
|
||||
if (shallowequal(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
|
||||
|
|
|
|||
Loading…
Reference in New Issue