From 929f501ff0680fef3049754c47b9b532c3c18aab Mon Sep 17 00:00:00 2001 From: gx-mac Date: Tue, 30 Mar 2021 15:13:19 +0800 Subject: [PATCH] fix: add syncFixedRowHeight --- build/Table.js | 6 ++++-- docs/api.md | 1 + package.json | 2 +- src/Table.js | 5 +++-- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/build/Table.js b/build/Table.js index ca5f2c7..5e7cb9c 100644 --- a/build/Table.js +++ b/build/Table.js @@ -168,6 +168,7 @@ var defaultProps = { setRowParentIndex: function setRowParentIndex() {}, tabIndex: '0', heightConsistent: false, + syncFixedRowHeight: false, size: 'md', rowDraggAble: false, hideDragHandle: false, @@ -1514,7 +1515,8 @@ var Table = function (_Component) { columns = _props9.columns, heightConsistent = _props9.heightConsistent, bodyDisplayInRow = _props9.bodyDisplayInRow, - lazyLoad = _props9.lazyLoad; + lazyLoad = _props9.lazyLoad, + syncFixedRowHeight = _props9.syncFixedRowHeight; var headRows = this.headTable ? this.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead'); var expandedRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-expanded-row') || []; @@ -1546,7 +1548,7 @@ var Table = function (_Component) { } // 为了提高性能，默认获取主表的高度，但是有的场景中固定列的高度比主表的高度高，所以提供此属性，会统计所有列的高度取最大的，设置 // 内容折行显示，并又设置了 height 的情况下，也要获取主表高度 - if (heightConsistent || !bodyDisplayInRow && rsHeight) { + if (heightConsistent || !bodyDisplayInRow && rsHeight && syncFixedRowHeight) { var leftHeight = void 0, rightHeight = void 0, currentHeight = void 0, diff --git a/docs/api.md b/docs/api.md index af7e660..f2f9413 100644 --- a/docs/api.md +++ b/docs/api.md @@ -76,6 +76,7 @@ import 'bee-table/build/Table.css'; | loadBuffer | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5 | hoverContent | hover某行时，动态渲染行菜单元素，此方法需返回行菜单元素的内容 | Function| | heightConsistent | 当固定列内容高度超出非固定列时，内容互错行，当此属性为true会将高度同步，当行过多时会有性能影响，所以建议非固定高度如果过高时，超出内容可以显示成省略号 | bool|false +| syncFixedRowHeight | 当bodyDisplayInRow为false的时候，同步固定列的高度 | bool | - | | height | 自定义表格行高 | number | - | | headerHeight | 自定义表头行高 | number | - | | headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool | true | diff --git a/package.json b/package.json index a21ecde..517a0b2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bee-table", - "version": "2.3.15-beta.17", + "version": "2.3.15-beta.18", "description": "Table ui component for react", "keywords": [ "react", diff --git a/src/Table.js b/src/Table.js index 0ada824..54e0aae 100644 --- a/src/Table.js +++ b/src/Table.js @@ -103,6 +103,7 @@ const defaultProps = { setRowParentIndex:()=>{}, tabIndex:'0', heightConsistent:false, + syncFixedRowHeight: false, size: 'md', rowDraggAble:false, hideDragHandle:false, @@ -1280,7 +1281,7 @@ class Table extends Component { syncFixedTableRowHeight() { //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题 - const { clsPrefix, height, headerHeight,columns,heightConsistent, bodyDisplayInRow, lazyLoad } = this.props; + const { clsPrefix, height, headerHeight,columns,heightConsistent, bodyDisplayInRow, lazyLoad, syncFixedRowHeight } = this.props; const headRows = this.headTable ? this.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead'); @@ -1313,7 +1314,7 @@ class Table extends Component { } // 为了提高性能，默认获取主表的高度，但是有的场景中固定列的高度比主表的高度高，所以提供此属性，会统计所有列的高度取最大的，设置 // 内容折行显示，并又设置了 height 的情况下，也要获取主表高度 - if(heightConsistent || (!bodyDisplayInRow && rsHeight)){ + if(heightConsistent || (!bodyDisplayInRow && rsHeight && syncFixedRowHeight)){ let leftHeight,rightHeight,currentHeight,maxHeight; leftHeight = leftBodyRows[index]?Number(leftBodyRows[index].getBoundingClientRect().height).toFixed(2):0; // 有些浏览器中，取到的高度是小数，直接parseInt有问题，保留两位小数处理 rightHeight = rightBodyRows[index]?Number(rightBodyRows[index].getBoundingClientRect().height).toFixed(2):0;