antd Table组件筛选功能,重新渲染筛选项依然选中

最近项目迭代中,设计到好多列表相关的展示,基于React封装了antd的Table组件,代码大致如下:

 <Table
      dataSource={dataSource}
      columns={columns}
      size={tableSize ? tableSize : "middle"}
      onChange={handleTableChange}
      scroll={scroll}
      pagination={{
        current: curPage,
        hideOnSinglePage: true, // 只有一页时 隐藏分页器
        showSizeChanger: true, // 展示 pageSize 切换器
        size: pageSize ? pageSize : "default",
        defaultPageSize: defaultPageSize ? defaultPageSize : 10, // 默认显示条数
        pageSizeOptions,
        total,
      }}
      expandable={expandable}
      bordered={bordered || false}
    />

其他页面调用该封装的Tabl组件,其中项目中有一个场景是通过Tab切换展示渲染不同的列表,并且两个Tab列表都有筛选的功能,发现筛选后再切换Tab筛选框高亮展示,再次切换后,发现之前的筛选项,仍然存在,

问题解决

在调用Table的时候将tab的状态值作为key值传给Table后,缓存消失

扩展

Table 的筛选功能:
首先在表格中进行数据的过滤和筛选大概有两种方式:

第一种是在后端进行数据的筛选,即做查询关键字的处理,当数据量较大,服务器压力较小的情况下进行选用。

第二种是在前端进行数据的筛选,即在前端对数据进行处理后显示,对客户端页面渲染压力较小的情况下进行选用,它还有一点优势就是减少了对后端的http请求,可以降低对后台服务器的压力

我们这里是选用了第一种方式进行数据筛选。因为需求中有导出的功能,导出的接口也需要获取筛选条件,所以才用户第一种方式

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值