使用el-cascader组件写下拉级联多选并且具有全选功能

样式

说明: 级联选择器中加上全选的按钮, 并且保证数据响应式。

思路

  • 因为是有全选的功能,所以不能直接使用el-cascader组件, 而是选择使用el-select组件, 在此组件内部使用el-cascader-panel级联面板
  • 全选按钮也是写在el-select组件中, 并且去监听全选按钮的状态, 根据全选的状态, 决定级联面板的数据与样式
  • 如果想要获取到最终选择的数据, 还是取级联面板绑定的值,而不是select的值。

代码实现

template:

注意:

1,el-select组件中,必须要写入一个el-option组件, 可以隐藏, 但必须存在

2,选中的数据响应式绑定的其实是级联面板的数据,同步到了select中,并且满足其展示的内容,比如"已选中2项"

javascript 复制代码
 <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:

javascript 复制代码
// 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, 作为参数提交即可
相关推荐
DaMu16 分钟前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员16 分钟前
一文读懂Font文件
前端
Asort18 分钟前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer19 分钟前
什么是 React 中的远程组件?
前端·react.js
我是日安22 分钟前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑22 分钟前
「AI」网站模版,效果如何?
前端·后端·产品
艾小码25 分钟前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
知觉26 分钟前
实现@imput支持用户输入最多三位整数,最多一位小数的数值
前端
RoyLin26 分钟前
TypeScript设计模式:状态模式
前端·后端·typescript
RoyLin28 分钟前
TypeScript设计模式:观察者模式
前端·后端·typescript