fix: add syncFixedRowHeight

This commit is contained in:
gx-mac 2021-03-30 15:13:19 +08:00
parent 1ed2de9c61
commit 929f501ff0
4 changed files with 9 additions and 5 deletions

View File

@ -168,6 +168,7 @@ var defaultProps = {
setRowParentIndex: function setRowParentIndex() {}, setRowParentIndex: function setRowParentIndex() {},
tabIndex: '0', tabIndex: '0',
heightConsistent: false, heightConsistent: false,
syncFixedRowHeight: false,
size: 'md', size: 'md',
rowDraggAble: false, rowDraggAble: false,
hideDragHandle: false, hideDragHandle: false,
@ -1514,7 +1515,8 @@ var Table = function (_Component) {
columns = _props9.columns, columns = _props9.columns,
heightConsistent = _props9.heightConsistent, heightConsistent = _props9.heightConsistent,
bodyDisplayInRow = _props9.bodyDisplayInRow, 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 headRows = this.headTable ? this.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead');
var expandedRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-expanded-row') || []; var expandedRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-expanded-row') || [];
@ -1546,7 +1548,7 @@ var Table = function (_Component) {
} }
// 为了提高性能,默认获取主表的高度,但是有的场景中固定列的高度比主表的高度高,所以提供此属性,会统计所有列的高度取最大的,设置 // 为了提高性能,默认获取主表的高度,但是有的场景中固定列的高度比主表的高度高,所以提供此属性,会统计所有列的高度取最大的,设置
// 内容折行显示,并又设置了 height 的情况下,也要获取主表高度 // 内容折行显示,并又设置了 height 的情况下,也要获取主表高度
if (heightConsistent || !bodyDisplayInRow && rsHeight) { if (heightConsistent || !bodyDisplayInRow && rsHeight && syncFixedRowHeight) {
var leftHeight = void 0, var leftHeight = void 0,
rightHeight = void 0, rightHeight = void 0,
currentHeight = void 0, currentHeight = void 0,

View File

@ -76,6 +76,7 @@ import 'bee-table/build/Table.css';
| loadBuffer | 使用BigData高阶组件实现大数据加载时上下加载的缓存 | number| 5 | loadBuffer | 使用BigData高阶组件实现大数据加载时上下加载的缓存 | number| 5
| hoverContent | hover某行时动态渲染行菜单元素此方法需返回行菜单元素的内容 | Function| | hoverContent | hover某行时动态渲染行菜单元素此方法需返回行菜单元素的内容 | Function|
| heightConsistent | 当固定列内容高度超出非固定列时内容互错行当此属性为true会将高度同步当行过多时会有性能影响所以建议非固定高度如果过高时超出内容可以显示成省略号 | bool|false | heightConsistent | 当固定列内容高度超出非固定列时内容互错行当此属性为true会将高度同步当行过多时会有性能影响所以建议非固定高度如果过高时超出内容可以显示成省略号 | bool|false
| syncFixedRowHeight | 当bodyDisplayInRow为false的时候同步固定列的高度 | bool | - |
| height | 自定义表格行高 | number | - | | height | 自定义表格行高 | number | - |
| headerHeight | 自定义表头行高 | number | - | | headerHeight | 自定义表头行高 | number | - |
| headerDisplayInRow | 设置表头的内容显示一行,超出显示省略号 | bool | true | | headerDisplayInRow | 设置表头的内容显示一行,超出显示省略号 | bool | true |

View File

@ -1,6 +1,6 @@
{ {
"name": "bee-table", "name": "bee-table",
"version": "2.3.15-beta.17", "version": "2.3.15-beta.18",
"description": "Table ui component for react", "description": "Table ui component for react",
"keywords": [ "keywords": [
"react", "react",

View File

@ -103,6 +103,7 @@ const defaultProps = {
setRowParentIndex:()=>{}, setRowParentIndex:()=>{},
tabIndex:'0', tabIndex:'0',
heightConsistent:false, heightConsistent:false,
syncFixedRowHeight: false,
size: 'md', size: 'md',
rowDraggAble:false, rowDraggAble:false,
hideDragHandle:false, hideDragHandle:false,
@ -1280,7 +1281,7 @@ class Table extends Component {
syncFixedTableRowHeight() { syncFixedTableRowHeight() {
//this.props.height、headerHeight分别为用户传入的行高和表头高度如果有值所有行的高度都是固定的主要为了避免在千行数据中有固定列时获取行高度有问题 //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 ? const headRows = this.headTable ?
this.headTable.querySelectorAll('thead') : this.headTable.querySelectorAll('thead') :
this.bodyTable.querySelectorAll('thead'); this.bodyTable.querySelectorAll('thead');
@ -1313,7 +1314,7 @@ class Table extends Component {
} }
// 为了提高性能,默认获取主表的高度,但是有的场景中固定列的高度比主表的高度高,所以提供此属性,会统计所有列的高度取最大的,设置 // 为了提高性能,默认获取主表的高度,但是有的场景中固定列的高度比主表的高度高,所以提供此属性,会统计所有列的高度取最大的,设置
// 内容折行显示,并又设置了 height 的情况下,也要获取主表高度 // 内容折行显示,并又设置了 height 的情况下,也要获取主表高度
if(heightConsistent || (!bodyDisplayInRow && rsHeight)){ if(heightConsistent || (!bodyDisplayInRow && rsHeight && syncFixedRowHeight)){
let leftHeight,rightHeight,currentHeight,maxHeight; let leftHeight,rightHeight,currentHeight,maxHeight;
leftHeight = leftBodyRows[index]?Number(leftBodyRows[index].getBoundingClientRect().height).toFixed(2):0; // 有些浏览器中取到的高度是小数直接parseInt有问题保留两位小数处理 leftHeight = leftBodyRows[index]?Number(leftBodyRows[index].getBoundingClientRect().height).toFixed(2):0; // 有些浏览器中取到的高度是小数直接parseInt有问题保留两位小数处理
rightHeight = rightBodyRows[index]?Number(rightBodyRows[index].getBoundingClientRect().height).toFixed(2):0; rightHeight = rightBodyRows[index]?Number(rightBodyRows[index].getBoundingClientRect().height).toFixed(2):0;