vue vxe-table 实现列个性化自定义列功能，自动记忆用户的操作列状态，完整的详细教程

vue  vxe-table 实现列个性化自定义列功能，自动记忆用户的操作列状态，完整的详细教程
在开发 ERP 系统或后台管理系统时，经常需要用到的记忆列状态的功能，就是不同用户根据不同的列表页面，比如将用户主动将常用的列显示出来和不常用的列隐藏，列冻结状态等，刷新页面或者下次进入页面后自动回复成上次操作的列状态，这个功能就非常有用了。
查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table
启用功能

通过设置 toolbar-config.custom 启用列个性化设置功能，支持工具栏模式、弹出窗口模式、抽屉模式显示个性化列操作面板，非常灵活的设置项。通过给表格设置 id 属性，确保每个表格的 id 必须是唯一的，记忆状态是根据 id 进行数据缓存的，如果不同表格 id 出现重复，就会导致不同表格的状态数据混乱。
工具栏模式

弹出窗口模式

抽屉模式

列宽状态记忆

通过 custom-config.allowResizable 启用，启用后用户可以通过拖拽列宽自定义每一列的宽度，非常灵活

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions"></vxe-grid>
4.   
5. </template>

复制代码

列显示/隐藏状态记忆

通过 custom-config.allowVisible 启用，启用后用户手动切换每一列的显示与隐藏，非常方便对常用列显示出来，不常用的列可以直接隐藏掉

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions"></vxe-grid>
4.   
5. </template>

复制代码

列冻结状态记忆

通过 custom-config.allowFixed 启用，启用后用户可以将最常用的列冻结在可视区内，方便操作

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions"></vxe-grid>
4.   
5. </template>

复制代码

列排序状态记忆

通过 custom-config.allowFixed 启用，启用后用户可对所有进行拖拽排序，将常用的列排序到前面去

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions"></vxe-grid>
4.   
5. </template>

复制代码

透视表分组和聚合函数（需要注意该功能是企业版的示例）

通过拖拽列到聚合列表，自动对数据进行合计汇总。设置 custom-config.allowGroup 和 custom-config.allowValues 启用拖拽功能，启用后用户可以对列表的数据进行手动分组以及对指定字段进行数据统计、汇总等复杂操作，无需开发介入

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions"></vxe-grid>
4.   
5. </template>

复制代码

完整状态记忆功能

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions"></vxe-grid>
4.   
5. </template>

复制代码

https://gitee.com/x-extends/vxe-table

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除