-后台返回的table数据不符合前端展示，
下面是人员统计表：
这样显然是不符合要求的。下面通过elementUI中的table提供了formatter这个属性来对传入的数据进行用户自定义的格式化。
目的达到了，直接上代码：
<!--
* @Descripttion: el-table中的formatter 对列的值进行处理
* @version:
* @Author: zhangfan
* @email: [email protected]
* @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: [email protected]
* @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遍历不生效啊，有点懵逼。希望有知道的大神赐教。