el-cascader添加全选功能-多级

最新推荐文章于 2025-10-31 13:41:15 发布

原创最新推荐文章于 2025-10-31 13:41:15 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

前端同时被 2 个专栏收录

171 篇文章

订阅专栏

element

104 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用Element UI的Cascader组件实现区域选择的全选/取消全选功能，并结合数据双向绑定和监听，确保在编辑与新建部门场景下，数据同步与状态管理。通过hasAll和isSelectAll变量，实现了全选节点的动态控制。

在这里插入图片描述

  <el-cascader class="myCascader" :options="areaData" :props="regionalInfosProps" collapse-tags clearable  v-model="editDepartmentForm.regionalInfos"  @change="changecascader($event,'edit')" popper-class="cascader-department cascaderOwner" size="small" ref="cascaderOwner" @expand-change="cascaderToscroll('cascaderOwner')" style="width:456px"  filterable></el-cascader>

data   数据说明
istype: ''  判断是新建还是编辑

addDepartmentForm{
  regionalInfos  // 后台需要数据 因为是对象格式 使用 this.$set  赋值
}
deepOptionData：【】  暂时存放数据 使数据变为  [  [100], [101,1011] ]
deepOptionDataCopy :[]  通过监听此数据 -- 改变需要给后台的值

思路
使用change事件–
hasAll 定义数据中是否有全选
isSelectAll 定义全选是否呗选中
hasAll && !isSelectAll 点击全选 --下面都勾选上
(!hasAll && this.isSelectAll) 取消选择全部
(!hasAll && !this.isSelectAll) // 反勾选全部
hasAll && this.isSelectAll) { // 勾中全部时然后取消下面的勾选全部取消掉

 changecascader(val, type) {
      this.istype = type
      let hasAll = val[0][0] === 10000000 // 全选定义值 10000000
    
        if (hasAll && this.isSelectAll) { // 勾中全部 然后取消下面的勾选 全部取消掉
          this.$refs.cascaderOwner.$refs.panel.clearCheckedNodes() //清空选中的节点	
          val.splice(0, 1) // 删除全选
          this.deepOptionDataCopy = val// 重新定义数据
          this.isSelectAll = false // 全选文字状态改变
          this.goall = false
        } else if (hasAll && !this.isSelectAll) { //选中全部
          this.isSelectAll = true
          this.selectAll(this.areaData, type)
           this.goall = false
        } else if (!hasAll && this.isSelectAll) { //取消选择全部
          this.isSelectAll = false
          this.$refs.cascaderOwner.$refs.panel.clearCheckedNodes()
          this.deepOptionDataCopy = []
           this.goall = false
        } else if (!hasAll && !this.isSelectAll) { // 反勾选全部
          this.goall = true // 反勾选全部状态 等长度一致 把全部数据放进去
          this.deepOptionDataCopy = val
        }
    },
    selectAll(value) { // 全选操作
      let arr
      
      value.forEach((res) => { // 处理数据为 [  [100], [101,1011] ]
        if (res.children) {
          this.deepOptionData.push(res.value)
          this.selectAll(res.children)
        } else {
          arr = JSON.parse(JSON.stringify(this.deepOptionData))
          arr.push(res.value) // [101,1011]

          this.deepOptionDataCopy.push(arr) // [  [100], [101,1011] ]
        }
      })
      this.deepOptionData = [] // 把 deepOptionData 数据还原
    },



+ 监听改变数据
 watch: {

    deepOptionDataCopy(val) {
      if (val?.length === 351 && val[0][0] != 10000000 && this.goall) { //下面全部勾选的话 全部也勾上
        val = [10000000].concat(val)
        this.isSelectAll = true
      }
      
      if (this.istype === 'new') {
        this.$set(this.addDepartmentForm, 'regionalInfos', val)
      } else {
         this.$set(this.editDepartmentForm, 'regionalInfos', val)
      }
    }
  },