Table页码切换会影响到另外一个Table页码 Pagination antd

比如我在第一个表格里面页面选择第七页,完后切换到另外一个表格,发现另外一个表格页码也是第七页,两个表格current值明明都是不一样的,不知道为什么会同步,下面是demo连接

链接描述

阅读 3.7k
3 个回答
    const pagination_1 = {
      key:1,
      current: current_1, // 当前页数
      pageSize: 5,
      hideOnSinglePage: true,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: (total, range) => `共 ${total} 条`,
      onChange: (page) => {this.onChange(page,'current_1')},
    };
    const pagination_2 = {
      key:2,
      current: current_2,
      pageSize: 20,
      hideOnSinglePage: true,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: (total, range) => `共 ${total} 条`,
      onChange: (page) => {this.onChange(page,'current_2')},
    };

pagination配置没有 current_1、current_2 属性,你这样写相当于没有配置,所以表格就使用默认的current

    // 这就有些坑了啊
    const contentList = {
      tab1: <Table 
            // 这里是关键
            key=1
            columns={columns_1} 
            dataSource={data} 
            pagination={pagination_1} 
            onRow={(record,index)=>{return {onClick:(event)=>{this.onRowData(record,index)}}}} 
          />,
      tab2: <Table 
            key=2
            columns={columns_1} 
            dataSource={data} 
            pagination={pagination_2}
          />,
    };
    /*
      原因: 你两个表格用一份数据 渲染出来的dom 是一致 导致react更新dom时候复用了上一份dom 所以需要给表格加上key
    */

如果不设置key,即使两个table的数据不一致,渲染出来的pagination也是一个,更新的时候也会复用

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题