guoju0808
0644e26120
业务背景 - 项目里 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 列)
