表格数据单个字段根据状态码展示相对应得name值
我们用接口获取到的表格信息有些值是传的状态码,前端需要做一些处理,比如以下的
第一种转换方法
<template>
<el-table-column
prop="payMode"
label="需要改变的单个字段"
align="center"
width="110"
>
<template>
<span v-if="payMode == '000'">河南</span>
<span v-else-if="payMode == '001'">北京</span>
<span v-else-if="payMode == '002'">河北</span>
<span v-else-if="payMode == '003'">天津</span>
<span v-else-if="payMode == '004'">山西</span>
</template>
</el-table-column>
</template>
第二种转换方法
if (row.aaaa == "000") {
return "北京";
} else if (row.aaaa == "001") {
return "河南";
} else if (row.aaaa == "002") {
return "河北";
} else if (row.aaaa == "003") {
return "天津";
} else if (row.aaaa == "004") {
return "山西";
} else {
return row.aaaa;
}
当然这些都是写死的,如果哪天我想多加一个状态呢?下面这个方法就很适合
<template>
<el-table-column
prop="aaaa"
label="需要改变的单个字段"
align="center"
width="110"
:formatter="payModeFormat"
></el-table-column>
</template>
<script>
export default {
data(){
return{
payModeList: [],
}
},
created() {
this.queryPayMode();
},
methods:{
payModeFormat (row) {
for (let i = 0; i < this.payModeList.length; i++) {
const element = this.payModeList[i];
if (row.aaaa == element.Value) {
console.info(element, i, element.Name)
return element.Name
}
}
},
queryPayMode() {
let param = {
paramString: "传参",
};
this.$axios.post(`接口的url地址`, param).then((res) => {
this.payModeList = res.data;
});
}
}
}
</script>