fix: reset left/rightBodyRows when data changes

This commit is contained in:
=gx 2021-03-12 15:41:22 +08:00
parent ffd42b97e6
commit d6e16c2ef1
3 changed files with 11 additions and 5 deletions

View File

@ -398,6 +398,7 @@ var Table = function (_Component) {
_this.leftColumnsLength; //左侧固定列的长度 _this.leftColumnsLength; //左侧固定列的长度
_this.centerColumnsLength; //非固定列的长度 _this.centerColumnsLength; //非固定列的长度
_this.columnsChildrenList = []; //复杂表头、所有叶子节点 _this.columnsChildrenList = []; //复杂表头、所有叶子节点
_this.dataChanged = false; // 数据是否改变
return _this; return _this;
} }
@ -432,6 +433,7 @@ var Table = function (_Component) {
showRowNum = _props.showRowNum; showRowNum = _props.showRowNum;
if ('data' in nextProps) { if ('data' in nextProps) {
this.dataChanged = JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data);
this.setState({ this.setState({
data: nextProps.data data: nextProps.data
}); });
@ -1512,8 +1514,9 @@ var Table = function (_Component) {
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') || [];
var bodyRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || []; var bodyRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
var leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || []; var leftBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
var rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || []; var rightBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
this.dataChanged = false;
var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) { var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
var height = headerHeight; var height = headerHeight;
if (headerHeight) { if (headerHeight) {

View File

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

View File

@ -178,6 +178,7 @@ class Table extends Component {
this.leftColumnsLength //左侧固定列的长度 this.leftColumnsLength //左侧固定列的长度
this.centerColumnsLength //非固定列的长度 this.centerColumnsLength //非固定列的长度
this.columnsChildrenList = [];//复杂表头、所有叶子节点 this.columnsChildrenList = [];//复杂表头、所有叶子节点
this.dataChanged = false; // 数据是否改变
} }
componentWillMount() { componentWillMount() {
this.centerColumnsLength = this.columnManager.centerColumns().length this.centerColumnsLength = this.columnManager.centerColumns().length
@ -209,6 +210,7 @@ class Table extends Component {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
let { hideDragHandle, rowDraggAble, showRowNum } = this.props; let { hideDragHandle, rowDraggAble, showRowNum } = this.props;
if ('data' in nextProps) { if ('data' in nextProps) {
this.dataChanged = JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)
this.setState({ this.setState({
data: nextProps.data, data: nextProps.data,
}); });
@ -1280,8 +1282,9 @@ class Table extends Component {
this.bodyTable.querySelectorAll('thead'); this.bodyTable.querySelectorAll('thead');
const expandedRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-expanded-row`) || []; const expandedRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-expanded-row`) || [];
const bodyRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-row`) || []; const bodyRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-row`) || [];
const leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || []; const leftBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || [];
const rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || []; const rightBodyRows = !this.dataChanged && this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || [];
this.dataChanged = false
const fixedColumnsHeadRowsHeight = [].map.call( const fixedColumnsHeadRowsHeight = [].map.call(
headRows, row =>{ headRows, row =>{
let height = headerHeight; let height = headerHeight;