el-table-column中formatter格式化字典

el-table-column中formatter格式化字典

---

• 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>