Files
ccdi/docs/plans/frontend/2026-04-22-staff-family-asset-single-horizontal-scroll-frontend-implementation.md

1.7 KiB

员工亲属资产表单单横向滚动实施计划

For agentic workers: REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 修复员工亲属关系维护页中亲属资产信息表单出现两条横向滚动条的问题,仅保留一条可用横向滚动条。

Architecture: 本次仅调整 ccdiStaffFmyRelation 页面亲属资产编辑表格的容器样式,不改动亲属资产字段、提交参数、接口结构和详情展示逻辑。实现路径与员工信息维护页保持一致:移除外层包裹容器的横向滚动能力,并取消表格根节点的强制最小宽度,让横向滚动统一由 el-table 内部负责。

Tech Stack: Vue 2, Element UI, JavaScript, Markdown


文件结构与职责

  • ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue 调整亲属资产编辑表格容器样式,消除双横向滚动条。

实施步骤

  • 定位亲属资产编辑表格双横向滚动条的成因
  • 删除外层滚动容器的横向滚动能力
  • 取消表格根节点的强制最小宽度,保留 el-table 内部横向滚动
  • 运行前端构建校验模板与样式改动未引入语法问题
  • 使用浏览器实际打开员工亲属关系维护弹窗,确认亲属资产表单只剩一条横向滚动条

验证

source ~/.nvm/nvm.sh && nvm use 14.21.3 >/dev/null && cd ruoyi-ui && npm run build:prod

完成标准

  • 员工亲属关系维护页亲属资产信息编辑表格仅保留一条横向滚动条
  • 亲属资产字段录入、删除和提交交互保持不变
  • 页面未新增额外横向滚动副作用