# 员工亲属资产表单单横向滚动实施记录

## 文档信息

- 保存路径：`docs/reports/implementation/2026-04-22-staff-family-asset-single-horizontal-scroll-implementation.md`
- 实施日期：2026-04-22
- 关联范围：员工亲属关系维护前端页面

## 本次修改内容

1. 定位到员工亲属关系维护页亲属资产编辑表格存在双横向滚动条，原因是外层 `assets-table-wrapper` 与 `el-table` 内层同时承担横向滚动。
2. 移除外层容器的 `overflow-x: auto`，避免包裹层再次生成横向滚动条。
3. 将亲属资产编辑表格根节点从强制 `min-width` 调整为 `width: 100%`，保持表格横向滚动由 `el-table` 自身管理。
4. 新增本次前端实施计划与实施记录，沉淀问题定位、改动范围与验证要求。

## 影响范围

- 前端：`ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue` 亲属资产信息编辑弹窗样式。
- 文档：新增前端实施计划与实施记录。

## 验证情况

1. 前端构建校验：
   - 执行命令：`source ~/.nvm/nvm.sh && nvm use 14.21.3 && cd ruoyi-ui && npm run build:prod`
   - 结果：构建成功；存在项目原有的 bundle size warnings，本次改动未引入构建失败。
2. Playwright 浏览器实测：
   - 执行方式：通过 `nvm use 25.9.0` 启动 `playwright-cli`，在浏览器中 mock 登录态与员工亲属关系维护页最小依赖接口后打开 `/maintain/staffFmyRelation`，进入“添加员工亲属关系”弹窗并新增一条亲属资产记录。
   - 结果：亲属资产表单外层包装器 `clientWidth=984`、`scrollWidth=984`、`overflowX=visible`；`el-table` 内部滚动区 `clientWidth=982`、`scrollWidth=1530`、`overflowX=auto`。说明外层不再生成横向滚动条，仅保留表格内部一条横向滚动条。