antd table 滚动到指定行方法

最新推荐文章于 2025-06-06 18:49:13 发布

jinglier

最新推荐文章于 2025-06-06 18:49:13 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： reactjs

本文链接：https://blog.youkuaiyun.com/jinglier520/article/details/84325972

reactjs 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种在React应用中实现表格特定行高亮显示并自动滚动至该行的技术方案。通过设置行样式和计算高亮行位置，确保用户能够快速定位到关注的数据行。

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

1、找到指定的行，并高亮

<div id={'tableList'}>
    <Table bordered 
            dataSource={data}
            pagination={false}
            rowClassName={this.setClassName}
            columns={this.columns}
            scroll={{ y: 440 }}/>
</div>

//设置行样式

    setClassName = (record, index) => {
        if(record.id == this.state.currId){
            return `row${index} ${styles.highlight}`; //highlight样式需要自己定义
        }
        return `row${index}`;
    }

2、滚动条滚动到高亮行位置

    
    //调用getRowHeightAndSetTop方法获取高亮行的index值后，通过setScrollTopValue设置滚动条位置
    //data：table的datasource数据
    //value：当前需要高亮的值
    getRowHeightAndSetTop(data, value){
        data && data.forEach((item, index) => {
            if(item.id == value){
                this.setTableScrollTop(index);
            }
        })
    }
    //设置滚动条位置的方法
    setTableScrollTop(index){
        if (index != 0 || index != -1){
            //40是一行的高度，index*40就是滚动条要移动的位置
            let currPosition = index * 40;
            $(`#list .ant-table-body`).scrollTop(currPosition);
        }
    }