elementUI-- cascader 任意选择节点

最新推荐文章于 2024-05-30 16:01:07 发布

GGYY.

最新推荐文章于 2024-05-30 16:01:07 发布

阅读量790

点赞数

分类专栏： vue elementUI 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45682449/article/details/127577101

版权

vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

elementUI

1 篇文章 0 订阅

订阅专栏

需求：

需要有联级下拉选择，可以任意选择叶节点进行接口查询

实现效果：

在这里插入图片描述
==============>

在这里插入图片描述

代码：

// template 中
// 注意 props 中emitPath、checkStrictly
<el-col :span="8">
 <el-form-item label="所属模块:" size="mini">
     <el-cascader
       ref="cascaderRef"
       :key="moduleKey"
       v-model="form.module"
       :options="curModuleOptions"
       :props="{ expandTrigger: 'hover', emitPath: false, checkStrictly: true }"
       clearable
     >
       <template slot-scope="{ node, data }">
         <div @click="cascaderClick(node, data)">
           <span>{{ data.label }}</span>
         </div>
       </template>
     </el-cascader>
   </el-form-item>
 </el-col>

// methods 中
// 联级下拉 任意触发
cascaderClick(node, data) {
  // node.path为选中的数组、data.label 为选中的最后一个叶节点
  this.$refs.cascaderRef.checkedValue = node.path;
  this.$refs.cascaderRef.computePresentText(); // 选中 有数据 但是不展示在框中，调用这个方法进行展示
  this.$refs.cascaderRef.toggleDropDownVisible(false);
},