Table 表格 - 列配置

通过列配置面板可以动态控制列的显示/隐藏和固定方向，实现个性化的表格展示。

列显隐控制

通过面板中的复选框可以控制每列的显示/隐藏，支持全选/取消全选操作。

列显隐控制

固定列配置

通过配置面板可以动态设置每列是否固定到左侧或右侧。点击已选中的固定方向可取消固定。

固定列配置

完整列配置面板

组合显隐控制和固定列配置，提供重置按钮可一键恢复默认配置。

完整列配置面板

API

ColumnItem 配置

属性	说明	类型	默认值
prop	列字段名	string	—
label	列标题	string	—
width	列宽度	number	—
visible	是否显示	boolean	true
fixed	固定方向	'left' | 'right' | false	false

实现原理

1. 列显隐： 维护一个包含 visible 属性的列配置数组，通过 computed 过滤出 visible: true 的列传给表格
2. 列固定： 在列配置中设置 fixed 属性，映射为表格列的 fixed 属性
3. 响应式： 配置变更后自动触发表格重新渲染，无需手动刷新

使用建议

1. 列配置数据可以存储到 localStorage 实现持久化
2. 建议提供"重置"功能让用户恢复默认配置
3. 固定列配置时注意左右固定列的宽度之和不要超过表格总宽度
4. 结合列拖拽功能可以实现更灵活的列顺序调整