效果:
原因:
后台给我们的数据与我们要展示的数据不相符合,需要我们做进一步的格式化处理,一般是给我们一个额外的表
第一种方式:额外处理表中的数据,维护和添加方便
// 员工
export default {
// 聘用形式
hireType: [
{
id: 1,
value: '正式'
},
{
id: 2,
value: '非正式'
}
],
// 管理形式
subjection: [
{
id: '1',
value: '总部'
},
{
id: '2',
value: '分城市'
}
]
因为是默认导出,所以默认导入可以使用任意变量,然后需要使用reduce将数据处理成[ 1 : " 正式 " , 2 : " 非正式 " ]
import hireType from "@/constant/employees.js"
hireType.hireType.reduce((account,item) => {
const key = item.id
const value = item.value
account[key] = value
},{})
// [ 1 : "正式" , 2: "非正式" ]
使用的时候:
2.第二种使用方式定义常量(维护的话找到当页添加和维护)
fomartData(formOfEmployment) {
const hire = { 1: '正式', 2: '非正式' }
return hire[formOfEmployment] || '未知'
}
3.在当前页面的methods中用if判断(如果添加就添加else if),比较麻烦,不易维护
fomartData(formOfEmployment) {
// const hire = { 1: '正式', 2: '非正式' }
// return hire[formOfEmployment] || '未知'
if (formOfEmployment === 1) {
return '正式'
} else if (formOfEmployment === 2) {
return '非正式'
} else {
return '未知'
}
}
记得今日要开心呀~~