AntD Table中rowClassName执行多次导致性能问题，如何解决？

作者站长头像
站长
· 阅读数 13

AntD,Table用rowClassName控制行的背景色，包括选中行的背景色，选中行的index在onClick方法设置到useState。数据很多的情况下，tableRowClassName方法会执行多次，导致选择行时很慢

<Table dataSource={dataSource} columns={columns} size="small" bordered 
        loading={viewForm.loading} pagination={false} rowClassName={tableRowClassName} scroll={{ x: 1300, y: maxHeight}}
        onRow={(record, rowIndex) => ({
          onClick: () => onRowClick(record, rowIndex),
          onDoubleClick: () => getoPage(2, rowData),
        })}/>

const tableRowClassName = (record: any, index: number) => {
    console.info("tableRowClassName");
    if (viewForm.rowIndex === index) {
      return 'selected-row';
    }
    if (index % 2 === 1) {
      return 'light-blue-background';
    }
    
    if (record.StpKbn == 1) {
      return ' stop-distinguish-row';
    }
    if (record.SaihenCoNamUpdKbn == 1) {
      return ' disabled-distinguish-row';
    }
    return "";
  }

有什么方法在选择行时，变快一点吗？

回复
1个回答
avatar
test
2024-08-11

1.可以采用操作dom手段来处理

          onRow={(record, i) => ({
            onClick: (event) => {
              //  先清除已选高亮行
              const HighlightRow =document.getElementsByClassName("HighlightRow")![0];
              if (HighlightRow) {
                HighlightRow.classList.remove("HighlightRow");
              }
              //  增加高亮行 className
              let target = event.currentTarget as HTMLElement;
              while (target) {
                const classList = target!.classList;
                if (classList.contains("ant-table-row")) {
                  classList.add("HighlightRow");
                  break;
                }
                target = target.parentElement!;
              }
            },

2.通过 virtual 开启虚拟滚动 只会重新渲染可视区域内的行3.分页也是一种选择

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容