复杂表格显示错位

[xqk1]

环境及版本信息

• tinper-bee 版本号: 2.3.0

• 若使用单个组件，请标明该组件版本号："bee-complex-grid": "^2.0.28"

• 当前项目中react的版本号：16.6.3

• 所使用的操作系统：Mac

• 所使用的浏览器：chrome 78.0.3904.108

您所在的领域、行业或项目组：用友金融

描述这个问题:增加展开面板后，表格行错位

1、组件相关代码

代码粘贴区域：

/**
 * @title 高级表格的基础应用(基本示例3)
 * @description 全选、分页、过滤。功能、交换
 *
 */
import React, { Component } from "react";
import Grid from "bee-complex-grid";
import "tinper-bee/assets/tinper-bee.css";
import "bee-complex-grid/build/Grid.css";
import { Button } from "tinper-bee";
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80",
    render: (text, record, index) => {
      return index;
    },
    fixed: "left"
  },
  {
    title: "用户名",
    dataIndex: "a",
    key: "a",
    width: 580,
    className: "rowClassName"
  },
  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 80 },
  { title: "年龄", dataIndex: "c", key: "c", width: 200 }
];

const data = [...new Array(20)].map((e, i) => {
  const rs = { a: i + "a", b: i + "b", c: i + "c", d: i + "d", key: i };
  if (i % 3 == 0) {
    rs.b = "女";
  }
  return rs;
});

class Demo4 extends Component {
  constructor(props) {
    super(props);
  }
  //临时加个判断
  shouldComponentUpdate() {
    if (this.props.className == "u-panel-title") {
      return false;
    }
  }
  getSelectedDataFunc = data => {
    console.log("data", data);
  };

  selectedRow = (record, index) => {};
  /**
   * 请求页面数据
   */
  freshata = () => {};
  onDataNumSelect = () => {
    console.log("选择每页多少条的回调函数");
  };
  onRowHover = (index, record) => {
    this.currentIndex = index;
    this.currentRecord = record;
  };
  handleClick = () => {
    alert("这是第" + this.currentIndex + "列，用户名为:" + this.currentRecord.a);
  };

  getHoverContent = () => {
    return (
      <div className="opt-btns">
        <Button size="sm" onClick={this.handleClick}>
          一些操作
        </Button>{" "}
      </div>
    );
  };
  render() {
    let paginationObj = {
      items: 10, //一页显示多少条
      total: 100, //总共多少条
      freshData: this.freshData, //点击下一页刷新的数据
      onDataNumSelect: this.onDataNumSelect, //每页大小改变触发的事件
      noBorder: true,
      horizontalPosition: "center"
    };
    return (
      <Grid
        className="demo"
        columns={columns}
        data={data}
        getSelectedDataFunc={this.getSelectedDataFunc}
        paginationObj={paginationObj}
        loadLazy={true}
        heigth={40}
        bordered={false}
        scroll={{ y: 300 }}
        hoverContent={this.getHoverContent}
        onRowHover={this.onRowHover}
        expandedRowRender={function() {
          return <div>111</div>;
        }}
        expandIconAsCell={true}
      />
    );
  }
}
export default Demo4;

2、报错信息

当前的行为：效果（可截图说明）及动作描述

滚动表格至最后，表格行错位

期望的行为:表格行不错位

[yangchch6]

问题解决了，你那里的 bee-complex-grid 没有锁死版本，重新装包即可。（注意：需要把 node_modules 和 package-lock.json 删了，重新 npm install 一下）

[xqk1]

跟锁死版本没关系吧，我安装的tinper-bee就是2.3.0，bee-complex-grid就是2.0.28，
滑动到最下边的时候，就会错位，

[yangchch6]

我的意思是，你上面填写的版本号，是带^的，重新安装的时候，会自动升级新版本。我这边已经发了新版本了，你那边重新安装下依赖呗

你那里的 package.json 不需要任何修改，只需要把 node_modules 和 package-lock.json 删了，重新 npm install 一下。就可以自动升级依赖包了，package.json 里的版本升级机制了解一下～

[xqk1]

好的。