制表符在单击行时执行不必要的滚动

Question

我在React组件中有一个制表符表，该表具有定义的高度。如果我滚动到表格的底部并单击一行，则表格将滚动回到顶部。我什至可以看到出现了scrollVertical（）回调，其值为“ 0”。

如何防止这种不必要的滚动？

理想情况下，我希望滚动条保持不变，并且选定的行保持突出显示状态，直到单击另一行为止。

这里是相关代码。

  componentDidMount() {  
    this.tableInst = new Tabulator(this.tableRef, {
      layout: "fitDataFill",
      data: [],
      dataTree: true,
      dataTreeStartExpanded: true,
      selectable: 1,
      selectablePersistence: false,
      columns: [{ title: "Report", field: "reportName" }],
      rowClick: (e, row) => this.handleRowClick(e, row),
      scrollVertical: (top) => this.scrollVertical(top),
    });
  }

  handleRowClick = (e, row) => {
    var data = row.getData();
    if (!data.hasOwnProperty("_children")) {
      this.setState({ flavor: data.flavor });
    }
  };

  scrollVertical = (top) => {
    console.log("scroll: " + top);
  }

Answer 1

我找到了不需要的滚动到顶部的来源。

我在componentDidUpdate（）期间执行table.setData（）。

一旦table.setData（）被删除

• 表格不再滚动到顶部
• 所选行仍突出显示

一切正常！