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>
