如何使用el-cascader组件写下拉级联多选及全选功能
作者：__十七
这篇文章主要介绍了如何使用el-cascader组件写下拉级联多选及全选功能,因为是有全选的功能,所以不能直接使用el-cascader组件, 而是选择使用el-select组件, 在此组件内部使用el-cascader-panel级联面板,感兴趣的朋友跟随小编一起看看吧
样式
说明： 级联选择器中加上全选的按钮， 并且保证数据响应式。
思路
- 因为是有全选的功能，所以不能直接使用
el-cascader组件， 而是选择使用el-select组件， 在此组件内部使用el-cascader-panel级联面板 - 全选按钮也是写在el-select组件中， 并且去监听全选按钮的状态， 根据全选的状态， 决定级联面板的数据与样式
- 如果想要获取到最终选择的数据， 还是取级联面板绑定的值，而不是select的值。
代码实现
template:
注意：
1，el-select组件中，必须要写入一个el-option组件， 可以隐藏， 但必须存在2，选中的数据响应式绑定的其实是级联面板的数据，同步到了select中，并且满足其展示的内容，比如“已选中2项”
<el-form-item>
<div class="theme-date theme">
<div class="theme-date-prepend">功能模块</div>
<el-select v-model="selectModuleData">
<el-option style="display: none" value=""></el-option>
<el-checkbox class="allselect" v-model="allSelectModule"
>全选</el-checkbox
>
<el-cascader-panel
ref="cascaderModule"
:options="treeList"
v-model="cascaderModuleData"
popper-class="popper-select"
:show-all-levels="false"
:props="cascaderProp"
clearable
>
</el-cascader-panel>
</el-select>
</div>
</el-form-item>script：
// data数据：
cascaderProp: {
multiple: true,
value: "name",
label: "name",
children: "children",
},
allSelectModule: false,
cascaderModuleData: [],
selectModuleData: null,
// watch
watch: {
// 监听多选按钮是否被勾选
allSelectModule: {
immediate: true,
handler(newVal) {
if (newVal) {
/// 执行的方法，可以在下面的methods中寻找
this.cascaderAllSelect();
} else {
if(!this.$refs.cascaderModule) return
this.$refs.cascaderModule.clearCheckedNodes();
this.$refs.cascaderModule.checkedValue = []; // 清空选中值
this.cascaderModuleData = [];
this.$refs.cascaderModule.activePath = []; // 清除高亮
this.$refs.cascaderModule.syncActivePath(); // 初始化（只展示一级节点）
}
},
},
// 监听级联面板绑定的数据去同步select的数据， 让其显示在选择框中
cascaderModuleData: {
immediate: true,
handler(newVal) {
if (newVal.length === 0) {
this.selectModuleData = "";
if(!this.$refs.cascaderModule) return
this.$refs.cascaderModule.activePath = []; // 清除高亮
this.$refs.cascaderModule.syncActivePath(); // 初始化（只展示一级节点）
} else {
this.selectModuleData = `已选${newVal.length}项`;
}
},
},
},
/// methods
// 级联选择器全选， 其中moduleArray表示的是级联面板绑定的数据，表示如果此时没有全选的话那就将所有的数据，赋值到级联面板中，这样在显示中，就表示全选的状态。
cascaderAllSelect() {
if (this.cascaderModuleData.length !== this.moduleArray.length) {
this.cascaderModuleData = this.moduleArray;
}
},
// 直接获取级联面板的数据cascaderModuleData， 作为参数提交即可到此这篇关于如何使用el-cascader组件写下拉级联多选及全选功能的文章就介绍到这了,更多相关el-cascader下拉级联多选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！