el-table中的formatter 对列的值进行处理

-后台返回的table数据不符合前端展示，
下面是人员统计表：

这样显然是不符合要求的。下面通过elementUI中的table提供了formatter这个属性来对传入的数据进行用户自定义的格式化。

目的达到了，直接上代码：

<!--
 * @Descripttion: el-table中的formatter 对列的值进行处理
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-03 09:10:28
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-07-22 15:27:11
--> 

 <template>
  <div class="tableBox">
    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="sex" label="性別" width="180" :formatter="formatSex"></el-table-column>
      <el-table-column prop="address" label="出生地" :formatter="formatAddress"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "王小虎",
          address: "027",
          sex: 1
        },
        {
          name: "王二狗",
          address: "0851",
          sex: 1
        },
        {
          name: "王小丫",
          address: "024",
          sex: 0
        },
        {
          name: "王小翠",
          address: "0451",
          sex: 0
        }
      ]
    };
  },
  methods: {
    /**
     * @description: 格式化性別
     */
    formatSex(row, column) {
      switch (row.sex) {
        case 1:
          return "男";
          break;
        case 0:
          return "女";
          break;
        default:
          return "未知";
      }
    },
    /**
     * @description: 格式化出生地
     */
    formatAddress(row, column) {
      switch (row.address) {
        case "027":
          return "湖北武汉";
          break;
        case "0851":
          return "贵州贵阳";
          break;
        case "024":
          return "辽宁沈阳";
          break;
        case "0451":
          return "黑龙江哈尔滨";
          break;
        default:
          return "未知";
      }
    }
  }
};
</script>

<style  scoped lang="less">
</style>

效果是达到了，但是代码实现的方式，明显不是我辣条小哥哥的风范。必须优化优化。

<!--
 * @Descripttion: el-table中的formatter 对列的值进行处理
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-03 09:10:28
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-07-22 16:00:31
--> 

 <template>
  <div class="tableBox">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="sex" label="性別" width="180" :formatter="formatSex"></el-table-column>
      <el-table-column prop="address" label="出生地" :formatter="formatAddress"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "王小虎",
          address: "027",
          sex: 1
        },
        {
          name: "王二狗",
          address: "0851",
          sex: 1
        },
        {
          name: "王小丫",
          address: "024",
          sex: 0
        },
        {
          name: "王小翠",
          address: "0451",
          sex: 0
        }
      ],
      sexArray: [
        {
          name: 1,
          label: "男"
        },
        {
          name: 0,
          label: "女"
        }
      ],
      addressArray: [
        {
          name: "027",
          label: "湖北武汉"
        },
        {
          name: "0851",
          label: "贵州贵阳"
        },
        {
          name: "024",
          label: "辽宁沈阳"
        },
        {
          name: "0451",
          label: "黑龙江哈尔滨"
        },
        {
          name: "024",
          label: "辽宁沈阳"
        }
      ]
    };
  },
  methods: {
    /**
     * @description: 格式化性別
     */
    formatSex(row, column) {
      for (var i = 0; i < this.sexArray.length; i++) {
        if (this.sexArray[i].name == row.sex) {
          return this.sexArray[i].label;
        }
      }
    },
    /**
     * @description: 格式化出生地
     */
    formatAddress(row, column) {
      for (var i = 0; i < this.addressArray.length; i++) {
        if (this.addressArray[i].name == row.address) {
          return this.addressArray[i].label;
        }
      }
    }
  }
};
</script>

<style  scoped lang="less">
</style>

这样写才是我的风格吗，但是这个地方为什么用foreach遍历不生效啊，有点懵逼。希望有知道的大神赐教。