ant design pro pro-table 翻页定位的问题

问题

使用ant design pro 的时候,pro-table组件是一个强大的表格展示组件,不过翻页的时候,如果列表太长,翻页之后,没能定位到页面开头的部分(滚动条)

 

怎么解决这个问题呢,请继续往下看。

解决

 

增加onLoad 属性, 在加载完成的时候,把页面滚动到最顶部

 

<ProTable<TableListItem>
        size="small"
        style={{top: 10}}
        headerTitle="广场"
        actionRef={actionRef}
        rowKey="id"
        toolBarRender={(action, { selectedRows }) => [
          <Button type="primary" onClick={() => handleModalVisible(true)}>
            <PlusOutlined /> 我有一言
          </Button>
        ]}
        request={params => queryRule(params)}
        onLoad={() => {
          console.log("我们应该跑到顶上去");
          document.documentElement.scrollTop=0;
        }}
        columns={columns}
        search={false}
      />

 

参考上面示例的代码,注意onLoad里面定义的一个函数,最核心的代码,document.documentElement.scrollTop=0

 

你也可以在这里,写其他的业务逻辑,都是加载完之后触发。

分类: 前端开发 标签: 前端 发布于: 2020-12-26 19:19:34, 点击数: