VUE 级联多选的方法，任意一级选择

最新推荐文章于 2025-09-11 00:46:03 发布

原创最新推荐文章于 2025-09-11 00:46:03 发布 · 6.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了在Vue 2.13.0版本中如何使用级联选择器(cascader)组件进行多级选择，并特别讲解了checkStrictly、multiple及emitPath属性的作用，演示了如何仅返回当前节点值。

该文章已生成可运行项目，

本人使用vue2.13.0版本
首先说vue进行级联选择，可以选择任意一级
其样本如下
在这里插入图片描述
代码部分：

<div class="block">
  <span class="demonstration">单选选择任意一级选项</span>
  <el-cascader
    :options="options"
    :props="{ checkStrictly: true,multiple: true,emitPath:false }"
    clearable></el-cascader>
</div>
<script>
  export default {
    data() {
      return {
      	options:{[value:'xxx',children:[],lable:'xxx'
      			],}
      		}
      	}
<

以上即可，其中options中为树形结构数据，
checkStrictly:true属性表示上下级不会级联进行选择，
multiple: true属性表示开启多选，
emitPath:false 属性表示在选择节点以后，将该节点单独返回------默认为true 时，当选二级节点时，返回的是[一级节点value,二级节点value]
这里将其设置为false时，则当选择二级或者其他等级的节点时，只返回当前节点值，而不是返回数组

本文章已经生成可运行项目