将字符串内容所对应的对象属性数据取出,再转为字符串展示
以下是业务场景:
接口数据:
subject_ids:‘1,2,3’
筛选项:
subjects: [ 0: {id: “1”, name: “语文”}
1: {id: “2”, name: “数学”}
2: {id: “3”, name: “英语”}
3: {id: “4”, name: “物理”}]
目标数据:‘’语文,数学,英语‘’内容展示:
内容展示:
<el-form-item label="学科:">{{baseInfo.subject_ids}}</el-form-item>
计算属性监听变化:
computed: {
// 调用方法处理,可以同时处理多个数据
baseInfo () {
// teacherData存储subject_ids数据
const info = this.teacherData return {
//将处理好的数据返回
subject_ids: this.formOptionFilter(info.subject_ids, 'subjects')
}
}
}
方法里面进行处理:
methods:{
formOptionFilter (data, type) {
// data是subject_ids的内容,type是对应筛选项的属性名
let dataArr = (data + '').split(',')
let value = []
for (let key in this.formOption[type]) {
for (let index in dataArr) {
if (this.formOption[type][key].id === dataArr[index]) {
let data = this.formOption[type][key].name
value.push(data)
}
}
}
return value.join(',')
}
}
- data传进来的是字符串,通过split方法转换为数组dataArr
- 通过for in 方法遍历筛选项取出筛选选的每一项
- 接下来遍历 dataArr, 取出dataArr的id
- 判断筛选项的id与数组取出的id是否一致
- 一致就通过push方法存储到value数组中,反之,执行下一次循环
- 遍历所得的数据都存储在value数组中,通过join方法通过逗号分隔,再次转为字符串
- 最后 return 出来的就是目标数据以上内容分享,希望能帮助到像我一样的入门级开发者。