---
url: /components/column-settings.md
---
# ColumnSettings 列设置

表格列设置触发器：列显隐复选 + 拖拽排序，`storageKey` 提供时自动持久化到 localStorage（经安全封装），列定义变化自动收敛。

规则要点：

* `v-model` 是按显示顺序排列的可见列 `prop` 数组——顺序即拖拽结果，缺失的 `prop` 即隐藏列；
* 至少保留一列可见，取消最后一列的勾选会被忽略；重新勾选时列回到其在 `columns` 中的定义位置；
* 非受控（不传 `v-model`）时组件内部维护状态，配 `storage-key` 可在刷新后恢复；
* 列定义变化时自动剔除已不存在的列、把新增列按定义顺序补尾。

## 基础用法

通常放在 EbDataTable 的 toolbar 插槽内：

## 与 DataTable 联动

把 `v-model` 结果映射回 `columns` 即完成联动：隐藏列不渲染，拖拽排序直接改变表格列顺序；实例方法 `reset()` 等价于面板内的重置按钮。

试试取消勾选金额列或把创建时间拖到最前，表格即时跟随。

## 持久化到本地

非受控 + `storage-key`：选择结果写入 localStorage，刷新页面后自动恢复（仅恢复仍然存在的列，新列补尾）；`change` 事件可用于同步到服务端偏好。

不传 `button-text` 时触发器只显示齿轮图标，适合空间紧张的工具栏。

## API

本组件无插槽；弹出面板（复选列表 + 重置按钮）由组件内置。