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

  <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)
      }
    }
  },