【React-admin】构建React应用（13）- 基于React封装表格列设置

前言

之前用过antd.pro，有好多优秀的组件可供我们快速开发，其中有个列设置也是个不错的组件，可以根据屏幕来显示合适的列，隐藏掉不是很重要的列表项，其中列设置就是干这个的。

由于后期调整了框架由antd.pro更换为react-admin做权限管理，需要封装一套类似于这个列设置的组件，于是参考功能样式，做了一个简单的。

2 设置列组件

2.1 设计思路

如果看过前面的文章，会知道之前封装过一个表格组件，其中包含数据表格，条件查询，以及分页排序功能。

根据上图可以做出以下的设计思路（其中，设计到的组件有三个：列表组件，表格组件，列设置组件）：

1. 应该有个气泡卡片去支撑整个组件
2. header和body中的应该是属于不同的组件，header可以属于表格组件，body中的一定是另外一个子组件。
3. 关于列的定义应该分为三个部分 – columns : 父组件传递给表格组件的列集合，由于不同的模块调用同一个表格组件，所以每个某块会在列表组件中定义自己的columns。这里应该指所有可被显示的列(包含默认显示列和隐藏列) ：
   – dyColumns：表格组件绑定的columns，因为是公司的项目，所以通用组件一般会以公司的名称开头，这个是用于在封装的表格组件中，并且是根据columns中过滤之后的数据，就是决定哪些需要在表格中展示的列。
   – itemColumns：列设置组件中的列集合，一般在触发header中的全选和全不选时需要传递给列设置组件的列集合.
4. 原始数据columns中应该包含一个属性去控制该项是否需要被显示，比如我这里定义的是showCol，为Boolean类型，如果是重要的信息需要被用户看到就设置为true，否则设置为false。
5. 列设置组件props应该包含两个属性 – columns：列集合（包含需要显示的列和隐藏的列），可以根据columns中的showCol属性判断是否需要被checked。
   – callback：回调函数，当列被选中或者取消时，回调去修改表格中绑定的dyColumns。
6. 当全选的时候，应该去改变dyColumns和itemColumns。当全不选的时候，dyColumns应该设置为[]，并且itemColumns中的值showCol全部设置为false。

2.2 设计

2.2.1 定义初始列

如下，定义一个showCol来表示是否需要显示该列。

{
   
   
title: '发布状态', dataIndex: 'status', type: 'input', sorter: false, sortKey: "Status", showCol: true, show: true, width: "100px"
},

2.2.2 表格组件对于列设置的处理

首先在表格组件中会从props获取从列组件中获取columns，然后根据showCol=true去过滤出需要显示的列dycolumns，在表格组件中应该是这样的：

const {
   
    columns } = props;
// 统一处理传递的列数据，并对列数据进行过滤掉默认不显示的，临时存储
const columnsTemp = filter(columns, col => col.showCol)
// 改变设置列后表格绑定的列值
const [dycolumns, setDycolumns] = useState