【Vue + ElementUI】cascader 回显

本文介绍了一种使用Cascader级联选择器进行编辑操作回显的方法,通过map和push方法实现了从字符串到数组的转换,以支持部门层级的选择。此方法适用于二级结构,多级情况建议使用递归函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 这里由于服务端入库需要传入string(其实是服务端那大哥懒得改,我也懒得费嘴了,不如自己写来得快)使用cascader级联选择器最终选择的lable,编辑操作回显写了一个map方法获取id 再 Push到array再updata v-model 实现。目前只支持两级,后期可以写一个递归函数以达到多级处理回显。cascader v-model只接收一个Array类型才支持回显

<el-cascader
            v-model="addEditWorkerForm.department"
            :options="departmentTree" :props="addWorkerPositionProps" @change="addWorkerDepartment" :show-all-levels="true">
            <template slot-scope="{ node, data }">
              <span>{{ data.label }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
let departmentLable = data.department
        let departmentArray = []
        // cascader 回显部门处理,只处理两级,如果多于两级需要改写成递归函数
        this.departmentTree.map(item => {
          if(item.label == departmentLable){
            departmentArray.push(item.id)
          }else if(item.children && item.children.length > 0){
            for( let i in item.children){
              if(item.children[i].label == departmentLable){
                departmentArray.push(item.children[i].parentId)
                departmentArray.push(item.children[i].id)
              }
            }
          }
        })

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值