基于antd_table点击关联数据按钮,让列表滚动到当前数据
// 保存当前点击按钮返回的唯一标识
const MapTag = useSelector((state) => state.commomMap.MapTag);
useEffect(() => {
// 添加滚动条自动滚动到--点击模型--列表所在的行
let terrainTable = document.getElementById('terrainTable')
let table_sc = terrainTable.getElementsByClassName('ant-table-body')[0]
let v = terrainTable.getElementsByClassName('rowActive')[0]
if(v) {
// 相比较setTimeout,这种好处是由动画效果
requestAnimationFrame(() => {
table_sc.scrollTop = v.offsetTop
})
}
},[MapTag])
<div id='terrainTable'>
<Table
bordered={true}
columns={columns}
dataSource={data}
rowKey={(record) => record.key}
rowSelection={rowSelection}
scroll={{
// x: 700,
y: 220,
}}
pagination={false}
rowClassName={ recode => recode.id === MapTag ? 'rowActive' : ''}
/>
</div>
涉及到动态添加类名,获取ant-table-body元素和当前类型元素,设置列表scrollTop