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
代码就不放出来了，大家可以自己发挥，这个并不难
如果帮助到你，能点个赞吗？