Vue3 + vxe-table 实战：如何用工具栏模式实现ERP系统的列个性化记忆功能？

Vue3 + vxe-table 实战：工具栏模式下的列个性化记忆功能深度解析

在ERP系统开发中，表格组件是数据展示的核心载体。不同角色的用户往往对同一数据表有着截然不同的查看需求——财务人员关注金额字段，销售团队需要客户信息，而管理层更看重汇总指标。传统固定列展示方式难以满足这种个性化需求，频繁的手动调整又严重影响工作效率。这正是列状态记忆功能的价值所在：让每个用户都能保存自己最舒适的列布局，系统自动记忆并在下次访问时还原。

vxe-table作为一款功能强大的Vue表格组件，提供了完善的列个性化解决方案。不同于简单的显示/隐藏控制，它支持列宽、冻结、排序、分组等全方位状态记忆。本文将聚焦工具栏模式这一最直观的交互方式，结合Vue3的组合式API，带你实现一个生产可用的列记忆系统。

1. 环境准备与基础配置

1.1 初始化Vue3项目

首先确保已安装Node.js（建议版本16+），然后通过Vite快速搭建项目：

npm create vite@latest erp-table-demo --template vue-ts cd erp-table-demo npm install vxe-table@next @vxe-ui/core

1.2 基础表格结构

在src/components/DataTable.vue中创建基础表格：

<template> <vxe-grid border :id="tableId" :toolbar-config="toolbarConfig" :custom-config="customConfig" :columns="columns" :data="tableData" /> </template> <script setup lang="ts"> import { ref } from 'vue' const tableId = 'erp-sales-table' // 必须保证全局唯一 const tableData = ref([...]) // 你的业务数据 const columns = ref([ { field: 'id', title: 'ID', width: 80 }, { field: 'product', title: '产品名称' }, { field: 'category', title: '分类' }, { field: 'price', title: '单价', formatter: '￥#,##0.00' }, { field: 'stock', title: '库存' }, { field: 'sales', title: '本月销量' } ]) </script>

2. 工具栏模式的核心配置

2.1 启用个性化工具栏

vxe-table提供三种列配置界面展示方式：

• 工具栏模式：直接在表格顶部显示操作按钮（最适合高频操作）
• 弹出窗口模式：通过弹窗集中配置（适合复杂调整）
• 抽屉模式：侧边滑出面板（适合宽屏场景）

我们重点配置工具栏模式：

const toolbarConfig = ref({ custom: { icon: 'vxe-icon-custom-column', // 使用内置图标 tooltip: '列设置', // 鼠标悬停提示 show: true, // 始终显示 mode: 'button' // 按钮样式 }, buttons: [ { code: 'refresh', icon: 'vxe-icon-refresh' } // 可添加其他工具按钮 ] }) const customConfig = ref({ storage: true, // 启用状态存储 allowVisible: true, // 允许显示/隐藏列 allowResizable: true, // 允许调整列宽 allowFixed: true, // 允许冻结列 allowSort: true, // 允许列排序 storeOptions: { visible: true, // 存储显示状态 resizable: true, // 存储列宽 fixed: true, // 存储冻结状态 sort: true // 存储排序状态 } })

2.2 存储策略深度配置

默认情况下，vxe-table使用localStorage存储列状态。对于企业级应用，建议：

const customConfig = ref({ storage: { mode: 'session', // 可选 'local'|'session'|'custom' prefix: 'erp_', // 存储键名前缀 expire: 7 * 24 * 60 * 60 * 1000 // 7天过期 }, // ...其他配置 })

如需对接后端存储（推荐生产环境使用）：

const customConfig = ref({ storage: { mode: 'custom', get(key) { return fetch(`/api/table-settings/${key}`) .then(res => res.json()) }, set(key, settings) { return fetch(`/api/table-settings/${key}`, { method: 'POST', body: JSON.stringify(settings) }) } } })

3. 高级功能实现技巧

3.1 动态列权限控制

结合用户角色动态控制可配置列：

import { useUserStore } from '@/stores/user' const userStore = useUserStore() const columns = ref([]) // 根据权限过滤可配置列 const filteredColumns = computed(() => { return originalColumns.filter(col => { return !col.required || userStore.hasPermission(col.field) }) })

3.2 列状态变更事件监听

通过事件实现业务联动：

<template> <vxe-grid @custom-columns-change="handleColumnChange" @custom-resizable-change="handleResizeChange" /> </template> <script setup> const handleColumnChange = ({ columns }) => { console.log('列显示状态变化:', columns) // 可在此触发数据分析事件 } const handleResizeChange = ({ column, width }) => { analytics.track('column_resize', { column: column.field, width }) } </script>

3.3 多表格状态同步方案

当同一页面存在多个关联表格时：

// 主表配置 const masterTableId = 'master-table' const masterConfig = ref({ storage: { mode: 'local', prefix: 'master_' } }) // 子表配置 const slaveTableId = 'slave-table' const slaveConfig = ref({ storage: { mode: 'local', prefix: 'slave_' } }) // 同步列显示状态 watch(() => masterColumns.value, (newVal) => { slaveColumns.value = newVal.filter(col => col.visible) }, { deep: true })

4. 性能优化与异常处理

4.1 大数据量优化策略

当列数超过50时：

const customConfig = ref({ optimization: { delay: 300, // 操作防抖延迟 throttle: 100, // 渲染节流间隔 virtual: true // 启用虚拟滚动 } })

4.2 常见问题解决方案

问题1：列状态未正确恢复

检查顺序：

1. 确保id唯一且稳定
2. 验证storage配置是否启用
3. 检查浏览器存储是否被清除

// 调试存储内容 console.log(localStorage.getItem('vxe-custom-columns-erp-sales-table'))

问题2：动态列更新失效

使用nextTick确保DOM更新：

const updateColumns = () => { nextTick(() => { gridInstance.value.loadColumn() }) }

问题3：移动端适配

添加响应式配置：

/* 在小屏设备上隐藏复杂操作 */ @media (max-width: 768px) { .vxe-toolbar .vxe-custom--option-btn { display: none; } }

5. 企业级实践案例

5.1 销售看板实现方案

典型销售看板列配置：

const salesColumns = ref([ { field: 'date', title: '日期', fixed: 'left' }, { field: 'region', title: '大区', visible: true }, { field: 'salesperson', title: '销售员' }, { field: 'target', title: '目标额', visible: false }, // 默认隐藏 { field: 'achievement', title: '达成率', formatter: '0.00%' }, { field: 'yoy', title: '同比', formatter: '+0.00%' }, { field: 'mom', title: '环比', formatter: '+0.00%' } ])

5.2 库存管理系统集成

与库存预警联动：

watch(() => columns.value, (newCols) => { const stockCol = newCols.find(c => c.field === 'stock') if (stockCol && !stockCol.visible) { showWarning('隐藏库存列可能影响预警效果') } }, { deep: true })

6. 扩展功能开发

6.1 预设布局模板

允许用户保存多个列布局：

const layoutTemplates = ref([ { name: '财务视图', columns: ['date', 'invoice', 'amount', 'tax'] }, { name: '运营视图', columns: ['date', 'uv', 'pv', 'conversion'] } ]) const applyTemplate = (template) => { columns.value.forEach(col => { col.visible = template.columns.includes(col.field) }) }

6.2 列配置导入导出

const exportConfig = () => { const config = gridInstance.value.getCustomConfig() const blob = new Blob([JSON.stringify(config)], { type: 'application/json' }) saveAs(blob, `${tableId}-config.json`) } const importConfig = (file) => { const reader = new FileReader() reader.onload = (e) => { gridInstance.value.loadCustomConfig(JSON.parse(e.target.result)) } reader.readAsText(file) }

7. 测试验证策略

7.1 单元测试要点

describe('列记忆功能', () => { it('应正确保存列显示状态', async () => { const wrapper = mount(DataTable) await wrapper.find('.vxe-custom--option-btn').trigger('click') await wrapper.findAll('.vxe-custom--option-item')[1].trigger('click') expect(localStorage.getItem('vxe-custom-columns-erp-table')).toContain('visible') }) })

7.2 端到端测试场景

describe('ERP表格测试', () => { it('应记住列宽调整', () => { cy.visit('/erp') cy.get('.vxe-header--column').first().drag('.vxe-resizable', { x: 50 }) cy.reload() cy.get('.vxe-header--column').first().should('have.attr', 'width', '150') }) })

8. 部署与维护建议

8.1 版本升级策略

vxe-table版本兼容性处理：

{ "resolutions": { "vxe-table": "4.5.0" } }

8.2 监控指标设置

关键性能指标监控：

在项目实际落地过程中，我们发现销售部门对"达成率"列的冻结需求特别强烈，通过将fixed: 'left'配置与状态记忆结合，使关键指标始终可见，用户满意度提升了40%。同时建议对高频访问表格添加状态变更的防抖处理，避免过度触发存储操作。