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

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

链接描述

阅读 438
评论
    3 个回答
    • 1.3k
        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也是一个,更新的时候也会复用

          撰写回答

          登录后参与交流、获取后续更新提醒