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

2025年8月13日
| 没有评论

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 启用，启用后用户可以通过拖拽列宽自定义每一列的宽度，非常灵活

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  id: 'myCustomStorage1',
  toolbarConfig: {
    custom: true
  },
  customConfig: {
    storage: true,
    allowVisible: false,
    allowFixed: false,
    allowResizable: true,
    allowSort: false,
    allowGroup: false,
    allowValues: false,
    storeOptions: {
      visible: false, // 保存列可视状态
      resizable: true, // 保存列宽调整状态
      sort: false, // 保存列顺序状态
      fixed: false, // 保存列冻结状态
      aggGroup: false, // 保存列的行分组状态
      aggFunc: false// 保存列聚合函数状态
    }
  },
  columnConfig: {
    drag: true,
    resizable: true
  },
  columns: [
    { field: 'seq', type: 'seq', width: 90 },
    { field: 'name', title: 'Name' },
    { field: 'role', title: 'role' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'address' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

列显示/隐藏状态记忆

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

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  id: 'myCustomStorage2',
  toolbarConfig: {
    custom: true
  },
  customConfig: {
    storage: true,
    allowVisible: true,
    allowFixed: false,
    allowResizable: false,
    allowSort: false,
    allowGroup: false,
    allowValues: false,
    storeOptions: {
      visible: true, // 保存列可视状态
      resizable: false, // 保存列宽调整状态
      sort: false, // 保存列顺序状态
      fixed: false, // 保存列冻结状态
      aggGroup: false, // 保存列的行分组状态
      aggFunc: false// 保存列聚合函数状态
    }
  },
  columnConfig: {
    drag: true,
    resizable: true
  },
  columns: [
    { field: 'seq', type: 'seq', width: 90 },
    { field: 'name', title: 'Name' },
    { field: 'role', title: 'role' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'address' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

列冻结状态记忆

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

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  id: 'myCustomStorage3',
  toolbarConfig: {
    custom: true
  },
  customConfig: {
    storage: true,
    allowVisible: false,
    allowFixed: true,
    allowResizable: false,
    allowSort: false,
    allowGroup: false,
    allowValues: false,
    storeOptions: {
      visible: false, // 保存列可视状态
      resizable: false, // 保存列宽调整状态
      sort: false, // 保存列顺序状态
      fixed: true, // 保存列冻结状态
      aggGroup: false, // 保存列的行分组状态
      aggFunc: false// 保存列聚合函数状态
    }
  },
  columnConfig: {
    drag: true,
    resizable: true
  },
  columns: [
    { field: 'seq', type: 'seq', width: 90 },
    { field: 'name', title: 'Name' },
    { field: 'role', title: 'role' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'address' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

列排序状态记忆

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

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  id: 'myCustomStorage4',
  toolbarConfig: {
    custom: true
  },
  customConfig: {
    storage: true,
    allowVisible: false,
    allowFixed: false,
    allowResizable: false,
    allowSort: true,
    allowGroup: false,
    allowValues: false,
    storeOptions: {
      visible: false, // 保存列可视状态
      resizable: false, // 保存列宽调整状态
      sort: true, // 保存列顺序状态
      fixed: false, // 保存列冻结状态
      aggGroup: false, // 保存列的行分组状态
      aggFunc: false// 保存列聚合函数状态
    }
  },
  columnConfig: {
    drag: true,
    resizable: true
  },
  columns: [
    { field: 'seq', type: 'seq', width: 90 },
    { field: 'name', title: 'Name' },
    { field: 'role', title: 'role' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'address' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

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

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

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  id: 'myCustomStorage5',
  toolbarConfig: {
    custom: true
  },
  customConfig: {
    storage: true,
    allowVisible: false,
    allowFixed: false,
    allowResizable: false,
    allowSort: false,
    allowGroup: true,
    allowValues: true,
    storeOptions: {
      visible: false, // 保存列可视状态
      resizable: false, // 保存列宽调整状态
      sort: false, // 保存列顺序状态
      fixed: false, // 保存列冻结状态
      aggGroup: true, // 保存列的行分组状态
      aggFunc: true // 保存列聚合函数状态
    }
  },
  columnConfig: {
    drag: true,
    resizable: true
  },
  columns: [
    { field: 'seq', type: 'seq', width: 90 },
    { field: 'name', title: 'Name' },
    { field: 'role', title: 'role' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'address' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

完整状态记忆功能

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  id: 'myCustomStorage6',
  toolbarConfig: {
    custom: true
  },
  customConfig: {
    storage: true,
    allowVisible: true,
    allowFixed: true,
    allowResizable: true,
    allowSort: true,
    allowGroup: true,
    allowValues: true,
    storeOptions: {
      visible: true, // 保存列可视状态
      resizable: true, // 保存列宽调整状态
      sort: true, // 保存列顺序状态
      fixed: true, // 保存列冻结状态
      aggGroup: true, // 保存列的行分组状态
      aggFunc: true // 保存列聚合函数状态
    }
  },
  columnConfig: {
    drag: true,
    resizable: true
  },
  columns: [
    { field: 'seq', type: 'seq', width: 90 },
    { field: 'name', title: '产品名称', rowGroupNode: true },
    {
      title: '分组1',
      field: 'group1',
      children: [
        { field: 'attr2', title: 'Attr2' },
        { field: 'department', title: '部门' }
      ]
    },
    {
      title: '分组3',
      field: 'group3',
      children: [
        { field: 'plannedAmount', title: '实际销售' },
        { field: 'attr1', title: 'Attr1' },
        {
          title: '分组4',
          field: 'group4',
          children: [
            { field: 'actualAmount', title: '计划销售' },
            { field: 'attr4', title: 'Attr4' },
            { field: 'attr8', title: 'Attr8' }
          ]
        }
      ]
    },
    { field: 'date', title: '日期' }
  ],
  data: [
    { id: 10001, name: '笔记本', department: '销售1部', actualAmount: 80, plannedAmount: 100, date: '2025-02-01' },
    { id: 10002, name: '手机', department: '销售3部', actualAmount: 140, plannedAmount: 120, date: '2025-01-01' },
    { id: 10003, name: '键盘', department: '销售2部', actualAmount: 220, plannedAmount: 200, date: '2025-05-01' },
    { id: 10004, name: '鼠标', department: '销售1部', actualAmount: 110, plannedAmount: 140, date: '2025-01-01' },
    { id: 10005, name: '笔记本', department: '销售2部', actualAmount: 40, plannedAmount: 90, date: '2025-01-01' },
    { id: 10006, name: '鼠标', department: '销售4部', actualAmount: 40, plannedAmount: 120, date: '2025-03-01' },
    { id: 10007, name: '键盘', department: '销售1部', actualAmount: 234, plannedAmount: 300, date: '2025-05-01' },
    { id: 10008, name: '手机', department: '销售4部', actualAmount: 146, plannedAmount: 240, date: '2025-11-01' },
    { id: 10009, name: '笔记本', department: '销售3部', actualAmount: 78, plannedAmount: 120, date: '2025-05-01' },
    { id: 10010, name: '笔记本', department: '销售4部', actualAmount: 100, plannedAmount: 130, date: '2025-03-01' },
    { id: 10011, name: '手机', department: '销售2部', actualAmount: 146, plannedAmount: 150, date: '2025-03-01' },
    { id: 10012, name: '键盘', department: '销售4部', actualAmount: 130, plannedAmount: 130, date: '2025-10-01' },
    { id: 10013, name: '手机', department: '销售2部', actualAmount: 140, plannedAmount: 80, date: '2025-02-01' },
    { id: 10014, name: '笔记本', department: '销售1部', actualAmount: 200, plannedAmount: 100, date: '2025-08-01' },
    { id: 10015, name: '键盘', department: '销售3部', actualAmount: 320, plannedAmount: 300, date: '2025-05-01' },
    { id: 10016, name: '笔记本', department: '销售4部', actualAmount: 380, plannedAmount: 400, date: '2025-10-01' },
    { id: 10017, name: '鼠标', department: '销售1部', actualAmount: 34, plannedAmount: 200, date: '2025-12-01' },
    { id: 10018, name: '键盘', department: '销售4部', actualAmount: 100, plannedAmount: 150, date: '2025-10-01' },
    { id: 10019, name: '鼠标', department: '销售3部', actualAmount: 90, plannedAmount: 120, date: '2025-02-01' },
    { id: 10020, name: '手机', department: '销售2部', actualAmount: 40, plannedAmount: 50, date: '2025-03-01' }
  ]
})
</script>

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

brower, nodejs, vue, 前端