element ui Cascader select多选传值及反显

传值

后台需要接受的参数是数组格式
但是 Cascader点击事件返回的参数是id名的数组，无法获取label值，所以需要获取节点this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels,就可以获取到。

需要做出的效果图是这样的，所以我还需要获取层级字符串。我们二三级表单是通过动态加载获取的

获取到的this.$refs.cascaderAddr.getCheckedNodes()其中path和 pathLabels分别对应id和名字，我需要将键值对拼接一起，变成后端想要的格式。 在联级选择的点击事件中写。this.form.contentVOs就是我们最后想要的

因为选择一个人就会再输入一次区和部门的信息，所以需要数组去重

//数组去重
 unique(arr) {
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].contentCode === arr[j].contentCode) {
          // 如果第一个等于第二个，splice方法删除第二个
            arr.splice(j, 1)
            j--
          }
        }
      }
      return arr
    },

 // 获取部门及人员选择信息
    cascaderFun(a) {
      this.selectPeopleList = this.$refs.cascaderAddr.getCheckedNodes()
      let obj = {}
      console.log('this.selectPeopleList', this.selectPeopleList)
      this.selectPeopleList.map(i => {
        // 人员部门键值对匹配组成对象
        i.path.map((j, jIndex) => {
          i.pathLabels.map((k, kIndex) => {
            if (jIndex === kIndex) {
              obj = { contentCode: j, contentName: k,
                choiceType: kIndex + 1,
                courseId: this.classInfo.id ? this.classInfo.id : null }
              this.form.contentVOs.push(obj)
            }
          })
        })
      })
    },

反显

需要的样式

下面的文字显示就需要自己去拼了，上面展示了后台返回的格式，返回数据有个字段是choicType，1：区，2：部门，3：人，4：职务。所以我需要在这些返回值中选择出1，2，3的类型将信息拼接起来，所以我该怎么将这些拼接一起呢。在获取人员列表的信息时，人员信息有区和部门的信息。所以我只需要获取个人信息就可以啦

只要将deptName和userRealName拼接到一起就可以啦。但是我需要
用二级的数据去获取个人信息 -> 提取出返回值是3的id数组 -> 判断返回的数据是否有数组中的值，有进行拼接 -> 反显

res.data.contentVOs.map(i => {
          if (i.choiceType === 3) {
            arr.push(i.contentCode)
          }
        })
        res.data.contentVOs.map(i => {
          if (i.choiceType === 4) {
            this.selectPostList.push(i)
          }
          if (i.choiceType === 2) {
            userGetDeptId(i.contentCode).then(res => {
              res.data.map(j => {
                console.log(j, arr, arr.includes(String(j.userId)))
                if (arr.includes(String(j.userId))) {
                  console.log('数据', j)
                  const str = j.deptName + '/' + j.userRealName
                  this.reverseDsiplay.push(str)
                  console.log('显示', j.deptName + '/' + j.userRealName, this.reverseDsiplay)
                }
              })
            })
          }
        })

完整代码

<el-form-item v-if="form.learnersType === 1" label="" prop="students">
          <el-cascader
            ref="cascaderAddr"
            v-model.trim="form.selectDepartment"
            collapse-tags
            style="width: 35%"
            :options="deptList"
            :props="deptProps"
            :placeholder="reverseDsiplay.length>0?'已选择人员':'按部门及人员选择'"
            :check-strictly="true"
            @change="cascaderFun"
          />
          <div v-if="selectPeopleList.length>0||reverseDsiplay.length>0" class="select-people">
            <div class="select-title">
              <span>已选择</span>
              <span @click="eliminateDepartment">清空</span>
            </div>
            <div class="select-content">
              <div v-for="(item,index) in selectPeopleList" :key="index" class="people">{{ item.pathLabels.join('/') }}</div>
            </div>
            <div v-if="selectPeopleList.length===0" class="select-content">
              <div v-for="(item,index) in reverseDsiplay" :key="index" class="people">{{ item }}</div>
            </div>
          </div>
        </el-form-item>
   unique(arr) {
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].contentCode === arr[j].contentCode) {
          // 如果第一个等于第二个，splice方法删除第二个
            arr.splice(j, 1)
            j--
          }
        }
      }
      return arr
    },
    // 获取部门及人员选择信息
    cascaderFun(a) {
      this.selectPeopleList = this.$refs.cascaderAddr.getCheckedNodes()
      let obj = {}
      console.log('this.selectPeopleList', this.selectPeopleList)
      this.selectPeopleList.map(i => {
        // 人员部门键值对匹配组成对象
        i.path.map((j, jIndex) => {
          i.pathLabels.map((k, kIndex) => {
            if (jIndex === kIndex) {
              obj = { contentCode: j, contentName: k,
                choiceType: kIndex + 1,
                courseId: this.classInfo.id ? this.classInfo.id : null }
              this.form.contentVOs.push(obj)
            }
          })
        })
      })
    },
    res.data.contentVOs.map(i => {
          if (i.choiceType === 3) {
            arr.push(i.contentCode)
          }
        })
        res.data.contentVOs.map(i => {
          if (i.choiceType === 4) {
            this.selectPostList.push(i)
          }
          if (i.choiceType === 2) {
            userGetDeptId(i.contentCode).then(res => {
              res.data.map(j => {
                console.log(j, arr, arr.includes(String(j.userId)))
                if (arr.includes(String(j.userId))) {
                  console.log('数据', j)
                  const str = j.deptName + '/' + j.userRealName
                  this.reverseDsiplay.push(str)
                  console.log('显示', j.deptName + '/' + j.userRealName, this.reverseDsiplay)
                }
              })
            })
          }
        })