本文主要是介绍使用element-UI Cascader组件，实现第一级单选选,第二级，第三级，子级可以多选，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
最近开发过程中，遇到需求测一个需求，就是级联选择器，需要多选；但是第一级是单选； 既要单选又要复选。参照网上内容，自己整理了一下功能实现；
如下图：
思路：1.把第一层的复选框去掉
2. 在第一层切换的时候，如果第一次分类改变了，把已有的值清空
代码如下：
html部分：<el-cascader:popper-class="'first-no-check-cascader'"v-model="settingTypeValue":options="treeData":props="{value: 'id',label: 'name',children: 'children',emitPath: false,multiple: true,}":show-all-levels="true"clearable@expand-change="changeSourceType"></el-cascader>css部分:// 级联选择器，第一级不需要复选框
.first-no-check-cascader {.el-cascader-panel {.el-cascader-menu:first-child {.el-cascader-node {.el-checkbox {display: none !important;}}}}
}函数部分：
cascaderTag:[], // 暂存点击时已有的tag
changeSourceType(selectItem) {// 一级分类只能选一个，如果一级分类修改了，清空已有值if (!this.cascaderTag.includes(selectItem[0])) {this.settingTypeValue = [];}this.cascaderTag = selectItem;},参考文章：Element UI级联选择器 多选模式下，实现同一父级下最多只能选中一个子级_element级联选择器可输入-CSDN博客
这篇关于使用element-UI Cascader组件，实现第一级单选选,第二级，第三级，子级可以多选的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
