elementUI 表格属性 匹配 数据字典数据

Element UI 的表格组件（el-table）提供了一种强大的方式来展示数据，其中匹配数据字典数据通常涉及设置表头列的数据选项（column properties）。你可以通过 `prop` 属性指定每列关联的数据源字段，而 `formatter` 或 `cell-renderer` 配置函数则可以将值转换成用户界面友好的显示形式。

例如，如果你有一个数据字典数组，它存储了各种状态的名称和对应的ID，你可以这样做：

<el-table-column
  prop="statusId"          // 原始数据中的状态ID字段
  label="状态"             // 显示给用户的标签
  :formatter="dictionaryFormatter"   // 自定义的 formatter 函数
></el-table-column>

`dictionaryFormatter` 函数会接收当前行的状态ID作为参数，然后从数据字典中查找相应的名称并返回：

data() {
  return {
    dataDictionary: [
      { id: 1, name: '启用' },
      { id: 2, name: '禁用' },
      ... // 其他状态
    ],
  };
}

dictionaryFormatter(statusId) {
  return this.dataDictionary.find(item => item.id === statusId)?.name;
}

这样，当表格数据显示状态ID时，会实际显示出对应的文字描述。