最近项目迭代中,设计到好多列表相关的展示,基于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请求,可以降低对后台服务器的压力
我们这里是选用了第一种方式进行数据筛选。因为需求中有导出的功能,导出的接口也需要获取筛选条件,所以才用户第一种方式