Element UI Table 如何只显示指定字段？

Question

在使用 Element UI 的 Table 组件时，如何只显示数据对象中的指定字段（如仅展示用户的姓名和邮箱，而忽略 id、密码等敏感或无关字段）？常见问题在于直接将完整数据对象绑定到 `data` 属性后，未对列进行精确控制，导致所有字段默认渲染。许多开发者误以为需在数据层过滤字段，但实际上应通过显式定义 `` 并绑定特定 `prop` 来实现。如何正确配置列以确保仅展示所需字段，同时保持数据结构完整性？

Answer 1

一、Element UI Table 组件字段展示控制：从基础到深度实践

在现代前端开发中，使用 Element UI 的 <el-table> 组件展示数据是常见需求。然而，一个普遍存在的问题是：当后端返回包含敏感或无关字段（如 id、password）的完整用户对象时，开发者往往误将整个数据对象直接绑定并期望自动过滤字段，导致所有属性被渲染。

1. 常见误区与问题分析

• 误区一：认为必须在 JavaScript 层预先处理数据，删除不需要的字段。
• 误区二：以为 el-table 会根据列定义自动排除未声明的 prop 字段。
• 误区三：滥用 computed 属性进行字段映射，增加维护成本。

实际上，Element UI 的表格组件并不会“自动”渲染所有字段，而是完全依赖于 <el-table-column> 的显式定义。只要不为某个字段创建列，该字段就不会出现在界面中，无论其是否存在于原始数据对象内。

2. 核心机制解析：列驱动的数据呈现逻辑

Element UI 的 el-table 遵循“声明即可见”的原则。这意味着：

行为	说明
仅定义 name 和 email 列	即使 data 中有 id、password、createdAt 等字段，也不会显示
未定义任何列	表格为空，即使数据存在
定义了 prop="password"	即便数据结构应隐藏密码，也会暴露

3. 正确配置方式：通过 prop 显式绑定所需字段

以下是一个典型示例，展示如何安全地只显示姓名和邮箱：

<template>
  <el-table :data="userList">
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="email" label="邮箱" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        { id: 1, name: '张三', email: '[e-mail]', password: 'xxx', role: 'admin' },
        { id: 2, name: '李四', email: '[e-mail]', password: 'yyy', role: 'user' }
      ]
    };
  }
};
</script>

在此结构中，尽管每个用户对象包含 id 和 password，但由于没有对应的 el-table-column 定义，这些字段不会被渲染。

4. 深度优化策略：结合计算属性与类型约束提升可维护性

对于大型项目，建议引入 TypeScript 或使用 computed 属性对展示字段做进一步抽象：

computed: {
  displayedUsers() {
    return this.rawUsers.map(({ name, email }) => ({ name, email }));
  }
}

这种方式不仅增强语义清晰度，也便于后续扩展权限控制或格式化逻辑。

5. 可视化流程图：字段筛选决策路径

graph TD
            A[获取原始数据] --> B{是否需预处理?}
            B -- 否 --> C[直接绑定 el-table:data]
            B -- 是 --> D[使用 computed/map 提取指定字段]
            C --> E[定义 el-table-column]
            D --> E
            E --> F[仅渲染 prop 对应字段]
            F --> G[完成安全展示]

6. 实际应用场景中的进阶技巧

• 动态列生成：通过 v-for 动态渲染列，配合 white-list 字段数组控制可见性。
• 权限驱动列显示：结合 user.role 决定是否渲染操作列或敏感信息列。
• 国际化支持：label 使用 $t 函数实现多语言切换。
• 嵌套字段访问：使用 prop="profile.contact.email" 访问深层属性。
• 自定义插槽：对复杂字段（如状态码）使用 scoped-slot 进行格式化。
• 性能考量：避免频繁重建数据结构，优先利用 Vue 的响应式系统。
• 调试建议：利用 Vue Devtools 检查传递给 table 的 data 是否携带多余字段。
• 安全性提醒：前端过滤不等于数据脱敏，后端仍需做最小权限输出。
• 可访问性增强：添加 aria-label、sortable 等辅助属性。
• 服务端分页集成：确保字段一致性，避免前后端字段映射错乱。

7. 最佳实践总结与架构建议

在企业级应用中，推荐采用如下模式：

1. 保持原始数据完整性，不在主数据流中 mutate。
2. 使用独立的 view model 层（如 mapToViewModel）转换数据。
3. 通过配置对象管理列定义，实现可配置化表格。
4. 利用 mixins 或 composables 封装通用列逻辑。
5. 结合 ESLint 规则禁止直接暴露敏感字段名。