ProTable 本地保存列设置

ProTable介绍

ProTable 的诞生是为了解决项目中需要写很多 table 的样板代码的问题，所以在其中做了封装了很多常用的逻辑。这些封装可以简单的分类为预设行为与预设逻辑。

依托于 ProForm 的能力，ProForm 拥有多种形态，可以切换查询表单类型，设置变形成为一个简单的 Form 表单，执行新建等功能。

是比基础版的Table功能更强大的组件，推荐多使用

列设置的开启与关闭

属性	描述	类型	默认值
options	table 工具栏，设为 false 时不显示.传入 function 会点击时触发	{{ density?: boolean, fullScreen: boolean | function, reload: boolean | function, setting: boolean | SettingOptionType }}	{ fullScreen: false, reload: true, setting: true }

即若只开启列设置
可以设置如下语句

options={{ fullScreen: false, setting: true, density: false, reload: false }}

列设置的保存

与默认选中行原理类似
首先需要有个变量存储相关设置，以及对应方法

属性	描述	类型	默认值
columnsState	受控的列状态，可以操作显示隐藏	columnsStateType	-

ProTable 设置

const [columnsStateMap, setColumnsStateMap] = useState();
<ProTable
  ......
  columnsState={{
    value: columnsStateMap,
    onChange: setColumnsStateMap,
  }}
/>

columnsStateMap例子

{
  "Column1": {
    "show": true,
    "fixed": "right",
    "order": 0
  },
  "Column2": {
    "show": true,
    "fixed": "left",
    "order": 1
  },
  "Column3": {
    "show": true,
    "fixed": "left",
    "order": 2
  },
  "Column4": {
    "show": true,
    "fixed": "left",
    "order": 3
  },
  "Column5": {
    "show": true,
    "order": 6
  },
  "Column6": {
    "show": true,
    "order": 4
  },
}

columnsStateMap是一个对象，其中的元素名就是你每一列设置的对应属性名
每一个元素也都对应了一个对象
如果没用到order或者fixed,好像就不会显示出来

然后怎么保存，怎么初始化，就简单了

我这边的思路是localStorage保存，
然后useEffect初始的时候判断一下有没有保存，
保存了就读取出来setColumnsStateMap

代码就不放出来了，大家可以自己发挥，这个并不难

如果帮助到你，能点个赞吗？