37 lines
1.4 KiB
Markdown
37 lines
1.4 KiB
Markdown
# 列表列宽拖拽 + localStorage 持久化（方案 C）
|
||
|
||
## 目标
|
||
|
||
所有主列表（`list-table`）支持拖拽调整列宽，并按用户 + 表格标识写入本机 localStorage，刷新后恢复。
|
||
|
||
## 方案
|
||
|
||
薄封装组件 `ListTable`（内部仍是 `el-table`）：
|
||
|
||
- 默认开启 `border`（Element Plus 列宽拖拽前置条件）
|
||
- `@header-dragend` 写入宽度
|
||
- 挂载 / 数据与列变化后，把已存宽度写回表格内部列并 `doLayout()`
|
||
- 页面侧保留现有 `el-table-column` 模板，一般无需给每列绑 `:width`
|
||
|
||
## 存储
|
||
|
||
- Key：`list_col_widths:{userId}:{tableKey}`
|
||
- Value：`Record<columnKey, number>`，`columnKey` 优先 `prop`，否则 `__selection__` / `__index__` 等
|
||
- 未登录时 `userId` 用 `anonymous`
|
||
|
||
## 接入约定
|
||
|
||
- 主列表：`<el-table class="list-table" …>` → `<ListTable table-key="模块-页面" class="list-table" …>`
|
||
- `table-key` 全局唯一；同页多表必须不同 key
|
||
- 弹窗内临时明细表可暂不接入；若接入须单独 `table-key`
|
||
- `defineExpose` 代理底层 `el-table` 实例方法（如 `clearSelection`）
|
||
|
||
## 样式
|
||
|
||
沿用现有 `list-table` 单元格边框；开启 `el-table--border` 后避免双线 / 顶底外框回潮（与 `el-ui.scss` 已有 border 覆盖对齐）。
|
||
|
||
## 非目标
|
||
|
||
- 不落库、不跨设备同步
|
||
- 本阶段不持久化列顺序（列显隐仍由 `usePersistedListColumns` 负责）
|