Table 表格 - 列配置

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

列显隐控制

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

序号	姓名	年龄	部门	薪资	电话	邮箱	地址

1	张三	28	技术部	15000	13800001111	zhangsan@test.com	北京市朝阳区
2	李四	32	产品部	18000	13800002222	lisi@test.com	上海市浦东新区
3	王五	25	设计部	14000	13800003333	wangwu@test.com	广州市天河区
4	赵六	35	运营部	22000	13800004444	zhaoliu@test.com	深圳市南山区
5	钱七	29	市场部	16000	13800005555	qianqi@test.com	杭州市西湖区

列显隐控制

固定列配置

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

序号	姓名	年龄	部门	薪资	电话	邮箱	地址

1	张三	28	技术部	15000	13800001111	zhangsan@test.com	北京市朝阳区
2	李四	32	产品部	18000	13800002222	lisi@test.com	上海市浦东新区
3	王五	25	设计部	14000	13800003333	wangwu@test.com	广州市天河区
4	赵六	35	运营部	22000	13800004444	zhaoliu@test.com	深圳市南山区
5	钱七	29	市场部	16000	13800005555	qianqi@test.com	杭州市西湖区

固定列配置

完整列配置面板

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

序号	姓名	年龄	部门	薪资	电话	邮箱	地址

1	张三	28	技术部	15000	13800001111	zhangsan@test.com	北京市朝阳区
2	李四	32	产品部	18000	13800002222	lisi@test.com	上海市浦东新区
3	王五	25	设计部	14000	13800003333	wangwu@test.com	广州市天河区
4	赵六	35	运营部	22000	13800004444	zhaoliu@test.com	深圳市南山区
5	钱七	29	市场部	16000	13800005555	qianqi@test.com	杭州市西湖区

完整列配置面板

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. 结合列拖拽功能可以实现更灵活的列顺序调整