1.4 KiB
1.4 KiB
列表列宽拖拽 + 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负责）