el-cascader的点击第二次才被选中以及回显问题

不完美女孩-

已于 2023-03-20 10:27:48 修改

阅读量1k

点赞数

文章标签： vue.js 前端 javascript

于 2023-03-16 19:16:42 首次发布

本文链接：https://blog.csdn.net/LJJONESEED/article/details/129596033

版权

// 取消使用v-model绑定值  用ref来获取值
<el-cascader :options="depOptions" ref='countrySelectRef' clearable @change='depChange()'></el-cascader>

 depChange() {
 	// 获取的是选中的value
     this.$refs["countrySelectRef"].getCheckedNodes()[0].path;
     //获取的是选中的值的label
     this.$refs["countrySelectRef"].getCheckedNodes()[0].pathLabels
},

//还有一种方法
<el-cascader model-value="AddDateModel.departme" :options="depOptions" clearable @change='depChange()'></el-cascader>

**// 前两种方法，回显都有问题，这是第三种；用value，回显的时候把值给了value就好了。**
<el-cascader :value="depValue" :options="depOptions" ref='countrySelectRef' clearable @change='depChange'></el-cascader>
// 回显
this.AddDateModel.departme = this.getPidMenuList('选中的值');
//方法
getPidMenuList(pid) {
   let cid_list = [];
   this.depOptions.forEach((item, index) => {
       if (item.value == pid) {
           cid_list = [item.value];
           return false;
       } else {
           if (item.children) {
               let newCid_list = [item.value];
               let list = nodefun(item.children, pid, newCid_list);
               if (list) {
                   cid_list = list;
               }
           }
       }
   });
   // 递归函数
   function nodefun(newVal, newId, newCid_list) {
       let flag = false;
       newVal.forEach((j) => {
           if (j.value == newId) {
               newCid_list.push(j.value);
               flag = true;
           } else {
               if (j.children) {
                   let cid_list = JSON.parse(
                       JSON.stringify(newCid_list)
                   );
                   cid_list.push(j.value);
                   let list = nodefun(j.children, newId, cid_list);
                   if (list) {
                       newCid_list = list;
                       flag = true;
                   }
               }
           }
       });
       if (flag) {
           return newCid_list;
       }
   }
   return cid_list;
},