Element UI 组件使用规范

Element UI 组件使用规范

技术栈

• Element UI 2.15.14（Vue2 版，非 Element Plus）。
• 数据表格：常规用 el-table；大数据量/虚拟滚动/复杂编辑 用 vxe-table 3.7.9。
• 表单：el-form + el-form-item + 校验 rules。
• 微前端：嵌入子应用用 @micro-zoe/micro-app。

表格（el-table / vxe-table）

选择

• 行数 < 200 且无复杂编辑：el-table。
• 行数大、需要虚拟滚动、固定列复杂、单元格编辑：vxe-table。
• 禁止用 el-table 渲染上万行（卡顿），切到 vxe-table。

el-table 要点

• 列宽能固定的尽量固定 width/min-width，避免抖动。
• 需要序号用 type="index"，选择列用 type="selection"。
• 自定义列内容用 slot（<template #default="{ row }">，Vue2 写法 <template slot-scope="scope">，跟随既有风格）。
• 操作列按钮过多时收敛到「更多」下拉，不要堆一排。

vxe-table 要点

• 启用虚拟滚动：:scroll-y="{ enabled: true }" 等（按 3.x API）。
• 列定义用 vxe-column；编辑用 edit-render。
• 大表格注意 row-id 唯一，便于选中态保持。

表单（el-form）

校验

• 必须定义 rules，绑定 :model 与 ref，提交前调用 this.$refs.form.validate()。
• 校验项：必填 required、长度、正则 pattern、自定义 validator。
• 身份证、手机号、医保卡号用专门正则/自定义校验。

// Do
rules: {
  idcard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { pattern: /(^\d{15}$|^\d{17}[\dXx]$)/, message: '身份证号格式不正确', trigger: 'blur' }
  ]
}

交互

• 提交期间禁用按钮（:loading），防重复提交。
• 表单数据与接口 DTO 对齐，避免提交时临时拼字段。

弹窗（el-dialog）

• 用 :visible.sync 控制显隐（Vue2 + Element UI 写法），不要用 v-if 手动管。
• 关闭时 @close 重置表单与校验状态（resetFields）。
• 频繁打开关闭且内容重的弹窗考虑 destroy-on-close，但注意状态恢复。
• 嵌套弹窗避免过深，必要时改用抽屉（el-drawer）。

消息与提示

• 成功/警告/错误用 this.$message / this.$messageBox（确认框 confirm）。
• 不要用原生 alert/confirm。
• 批量操作结果用 this.$notify 或聚合 message，避免刷屏。

微前端（micro-app）

• 主应用加载子应用用 <micro-app> 标签；数据通信走 micro-app 的 data/setData，不要依赖 window 全局变量传值。
• 子应用（如 EMR_Micro_Web）独立打包，注意资源路径 base 配置。
• 跨应用样式隔离：开启 micro-app 的样式隔离，避免 Element UI 样式串扰。

国际化（vue-i18n 8.x）

• 项目使用 vue-i18n 8.x（Vue2 版）。新增文案优先走 i18n key（按模块既有做法），不要在模板硬编码中文（除非该模块本就硬编码）。

安全

• 不要用 v-html 渲染用户/接口可控内容（XSS）；确需富文本，先净化。
• 不要把敏感信息（身份证、医保卡完整号）明文展示，按业务脱敏（见 security-anti-leak.md）。