el-cascader多选后端只给最后一个id值回显

   <el-cascader
      ref="cascader"
      v-model="pids"
      :options="options"
      :show-all-levels="false"
      :props="{ expandTrigger: 'hover', value: 'id', label: 'name',multiple: true }"
      @change="handleChange"
      clearable></el-cascader>
    <button @click="clickHandle">回显[3, 10]</button>
parent_id为上一级父级的id值,后续要查找使用 
pids为选择的数组
      pids: [],
      options: [
        {
          id: 1,
          name: '总部id1',
          children: [
            {
              id: 2,
              name: '工程技术部id2',
              parent_id: 1,
              children: [
                { id: 3, name: '工程员工id3', parent_id: 2 },
                { id: 4, name: '工程员工id4', parent_id: 2 },
                { id: 5, name: '工程员工id45', parent_id: 2 }
              ]
            },
            {
              id: 7,
              name: '人力资源id7',
              parent_id: 1,
              children: [
                { id: 8, name: '人力员工id8', parent_id: 7 },
                { id: 9, name: '人力员工id9', parent_id: 7 },
                { id: 10, name: '人力员工id10', parent_id: 7 }
              ]
            }
          ]
        }
      ],
      defaultArr: [3, 10] // 模拟后台传值

    handleChange(value) {
      console.log('value', value)
    },
    clickHandle() {
      const list = []
      this.defaultArr.map(v => {
        list.push(this.findParentLot(v))
      })
      this.pids = list
    },
    findParentLot(id) {
      const arr = []
      this.findLot(this.options, id, arr)
      return arr.reverse()
    },
    findLot(list, id, arr) {
      list.forEach((v) => {
        if (v.id === id) {
          arr.push(id)
          if (!v.parent_id || v.parent_id !== '0') {
            this.findLot(this.options, v.parent_id, arr)
          }
        } else {
          if (v.children && v.children.length) {
            this.findLot(v.children, id, arr)
          }
        }
      })
    },

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 18
    评论
评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值