08_el-table 某列根据字典 渲染

1、el-table 表格

例：费用类别 字段 需要按照后端提供的字典 进行渲染 ，添加 :formatter=‘formatRelatedtype’

        <el-table :data="tableData">
          <el-table-column label="费用类别" :formatter="formatRelatedType" width="200" align="center" prop="relatedType"
            show-overflow-tooltip />
          <el-table-column label="所属单位" width="auto" align="center" prop="orgName" show-overflow-tooltip />
          <el-table-column label="所属部门" width="200" align="center" prop="deptName" show-overflow-tooltip />
        </el-table>

2、首先访问后端接口，拿到字典配置数据

    // 查询费用类别
    async selectCostControlTypeEnum() {
      const res = await getcostControlTypeEnum()
      if (res.code == 200) {
        for (const [key, value] of Object.entries(res.data)) {
          this.relatedTypeOptions.push({
            value: key,
            label: value
          })
        }
      };
    },

此时已经将 后端传递过来的字典 交给 vue 实例管理

3、编写 formatRelatedtype 函数

    // 凭证状态 根据 字典 渲染
    formatVoucherFlag(row, column) {
      const option = this.payFlagOptions.find(item => item.value === row[column.property])
      return option ? option.label : ''
    },

这样表格中的 费用类别 根据后端 提供的数据 进行渲染，自动匹配