React｜antd｜table｜给某一条数据设置背景色，并滚动到这条数据的位置

最新推荐文章于 2024-04-24 19:56:27 发布

黛玉戴玉逮鱼

最新推荐文章于 2024-04-24 19:56:27 发布

阅读量233

点赞数 2

分类专栏：前端文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44730335/article/details/138133693

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

文章介绍了如何在JavaScript中使用`rowClassName`根据条件为表格行设置类名，然后利用`scrollIntoView`功能使满足条件的行滚动到视图中央。展示了如何结合`useRef`和`useEffect`在表格组件中实现这一功能。

摘要由CSDN通过智能技术生成

使用 rowClassName 给满足条件的的行设置类名
根据类名获取该行的 dom元素
使用 scrollIntoView 让该 dom元素滚动到中间位置

const tRef = useRef();

// 给 key== 'xxxxx' 的行设置背景色
const rowClassName = ({ key }) => {
    if (key == 'xxxxx')) { // 设置条件
      return `${styles.specialRow}`; // 设置背景色
    }
    return "";
 };

// 滚动到指定位置
useEffect(() => {
    if (tRef && datas.length != 0) {
      let d = document.getElementsByClassName(styles.specialRow)[0];
      d && d.scrollIntoView({ behavior: "smooth", block: "center" });
    }
}, [tRef, datas]);

<Table ref={tRef} rowClassName={rowClassName} dataSource={datas} columns={columns} rowKey="key" />