基于antd_table点击关联数据按钮,让列表滚动到当前数据

79 阅读1分钟

基于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