样式
说明: 级联选择器中加上全选的按钮, 并且保证数据响应式。
思路
- 因为是有全选的功能,所以不能直接使用
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-panelref="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) returnthis.$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) returnthis.$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, 作为参数提交即可