vue 中使用 <el-table-column/> 中的 formatter 格式化内容 🔮

<template>
  <!-- 列表 -->
	<el-table :data="list">
    <!-- 需要格式化的内容 -->
    <el-table-column prop="type" label="类型" :formatter="typeFormat">
    </el-table-column>
  </el-table>
</template>
<script>
  export default{
    data(){
      return{
        // 表格数据
        list:[],
        // 类型
        typeOptions:[]
      }
    },
    created(){
      this.getList();
      // 查询类型字典
			this.getDicts('risk_amt_type').then((res) => {
				this.typeOptions = res.data;
			});
    },
    methods:{
      // 获取表格数据
      getList(){
        // 后台接收表格数据
        this.list=res.data;
      },
      // 格式化表格内容--类型字典翻译
      typeFormat(row) {
        console.log(row);
				let type = '';
				this.typeOptions.forEach(item => {
					if (row.type == item.dictValue) {
						type = item.dictLabel;
					}
				});
				return type;
			},
    }
  }
</script>