feat: GrTable 移动端表格组件 + manager/Projects 试点
业务背景
- 项目里 17+ 列的列表页 (manager/Projects, Meetings, AdminUsers 等) 在手机端只能
横向滚动, 操作体验差.
- refer/gr-table.vue 是 Vue2 + Vant 组件, Vue3 不能直接用 (componentOptions
私有 API 已被 Vue3 移除).
- 新建 Vue3 + EP 兼容版本 GrTable, 吸收"主列显示 / 次要列折叠到展开行"思想.
组件设计
- props: data, mainCols (默认 = 第一个 prop + 最后一个 prop), mobileBreakpoint
- 通过 slots.default() 取 vnode, 读 vnode.props.prop/label (Vue3 思路, 替代
Vue2 componentOptions 私有 API)
- v-bind="\$attrs" 全透传 el-table 原生 props/events
- el-table 引用方法 (clearSelection / toggleRowSelection 等) defineExpose
暴露
manager/Projects 试点
- 引入 GrTable, :main-cols="['projectNo', 'projectName']"
- 手机端: 只显示项目编号 + 项目名称 + 操作列, 其他 13 列折叠到展开行
- 桌面端: 与原 el-table 完全一致 (所有 17 列)
- 操作列 (label=操作, 无 prop) 自动保留 (因为 shouldRenderColumn 跳过无 prop 列)
guoju0808
0644e26120