将字符串内容所对应的对象属性数据取出,再转为字符串展示

491 阅读1分钟

以下是业务场景:

接口数据: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(',')
    }
}

1. data传进来的是字符串,通过split方法转换为数组dataArr

2.通过for   in 方法遍历筛选项取出筛选选的每一项

3.接下来遍历 dataArr, 取出dataArr的id 

4.判断筛选项的id与数组取出的id是否一致

5.一致就通过push方法存储到value数组中,反之,执行下一次循环

6.遍历所得的数据都存储在value数组中,通过join方法通过逗号分隔,再次转为字符串

7.最后 return 出来的就是目标数据


以上内容分享,希望能帮助到像我一样的入门级开发者