表格数据单个字段根据状态码展示相对应得name值

表格数据单个字段根据状态码展示相对应得name值

第一种转换方法

//在页面中用v-if来判断状态码，==与相对应的状态码的时候展示相对应的数据
<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>

---

第二种转换方法

//在  script  中用 if 判断状态码，==与相对应的状态码的时候展示相对应的数据
  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;
      }

---

当然这些都是写死的，如果哪天我想多加一个状态呢？下面这个方法就很适合

//html代码
<template>
	<el-table-column
        prop="aaaa"
        label="需要改变的单个字段"
        align="center"
        width="110"
        :formatter="payModeFormat"
      ></el-table-column>
</template>

//在 data 里面定义一个字段，我们需要把接口里的数据放在一个新增的字段内
<script>
export default {
	data（）{
		return{
			payModeList: [],
		}
	}，
	created() {
		this.queryPayMode();//接口执行方法
	}，
	methods：{
		//这里需要拿到当前行的值，row
		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: "传参",
	      };
	      //这个接口就是存放状态码和相对应的name值的
	      this.$axios.post(`接口的url地址`, param).then((res) => {
	        this.payModeList = res.data;
	      });
	    }
	}
}
</script>