antd Table表格，Tr选择高亮

奥特曼老师

于 2024-03-25 17:31:59 发布

阅读量842

点赞数 9

文章标签： React Antd

本文链接：https://blog.youkuaiyun.com/Principal_Z/article/details/137020385

版权

本文介绍了如何在使用React开发的表格组件中实现行选择功能，并通过防抖技术实现在用户点击时动态修改选中行的背景颜色，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

	<Table
      columns={columns}
      rowSelection={rowSelection as any}
      rowKey={(rowKey: any) => rowKey.id}
      dataSource={tableData }
      pagination={false}
      rowClassName={(record: any) => `table-row-${record.id}`}
      onRow={(record: any) => ({
        onClick: () => {
          tableRowKeys.current = record.id
          onUpdateTableBgColor()
        }
      })}
    />

  const debounceRef = useRef<any>(null)

  // 修改选中table的颜色
  const onUpdateTableBgColor = (value?: any) => {
    if (debounceRef.current) return
    debounceRef.current = setTimeout(() => {
      // 选择
      tableData?.forEach((item: any) => {
        const element: any = document.querySelector(`.table-row-${item.id}`)
        if (!element) return
        if (tableRowKeys.current === item.id) {
          element.style.background = "rgba(46, 179, 255, 0.12)"
          debounceRef.current = null
        } else {
          element.style.background = "none"
        }
      })
      debounceRef.current = null
    }, 300);
  }