/deep/.el-cascader-panel:first-child .el-checkbox{
  display:none;
}

<template>
  <div>
    <el-cascader
      v-model="select_options"
      ref="cascader"
      :options="options_cascader"
      :props="getProps"
      :filterable="filterable"
      @change="optionsChange"
      collapse-tags
      clearable></el-cascader>
  </div>
</template>
<script>
  import cloneDeep from "lodash/cloneDeep";
 
  export default {
    name: "myCascader",
    props: {
      options: { // 級聯(lián)選擇器選項
        type: Array,
        default: []
      },
      is_deep: { // 是否有children，即數(shù)據(jù)深度是否為多層
        type: Boolean,
        required: true
      },
      has_all_select: { // 是否為帶有全部的選項
        type: Boolean,
        required: true
      },
      all_select_flag: { // '全部'選項的標(biāo)識
        type: String | Number,
        default: ''
      },
      value: {  // 綁定的value值
        type: String,
        default: 'value'
      },
      label: { // 綁定了label值
        type: String,
        default: 'label'
      },
      filterable: { // 是否可以模糊搜索（只能選中最后一層子節(jié)點(diǎn)）
        type: Boolean,
        default: false
      }
    },
    mounted() {
      this.options_cascader = cloneDeep(this.options) // 深拷貝傳過來的數(shù)據(jù)源，引用了lodash包
      if (!this.is_deep && this.has_all_select && !this.all_select_flag) {
        console.warn("當(dāng)前為單層數(shù)據(jù)且含有全部選項，請輸入全部選項標(biāo)識,默認(rèn)為''，如果全部類型的標(biāo)識為''請忽略")
      }
    },
    data() {
      return {
        options_cascader: [], // 所有選項
        select_options: [], // 以選擇的節(jié)點(diǎn)
        is_select_all: false, // 是否為全選
        deep_option_data: [] // 緩存各個深度的value
      }
    },
    computed: {
      // 獲取配置選項
      getProps() {
        return {
          multiple: true,
          expandTrigger: 'hover',
          emitPath: this.is_deep,
          value: this.value,
          label: this.label
        }
      },
    },
    methods: {
      optionsChange() {
        // 判斷已選中的節(jié)點(diǎn)中是否包含全部
        let has_all_option = false
        if (!this.is_deep) {
          has_all_option = this.select_options.includes(this.all_select_flag)
        } else {
          has_all_option = this.select_options.some(res => res.length === 1)
        }
        /**
         * 如果已選擇節(jié)點(diǎn)中包含全部，且is_select_all為true時，代表移除了選項中除全部外的某個節(jié)點(diǎn)
         * 如果已選擇節(jié)點(diǎn)中包含全部，且is_select_all為false時，代表選擇了全部節(jié)點(diǎn)
         * 如果已選擇節(jié)點(diǎn)中不包含全部，且is_select_all為true時，代表取消選擇全部節(jié)點(diǎn)
         * */
        if (has_all_option && this.is_select_all) {
          this.$refs.cascader.$refs.panel.clearCheckedNodes()
          this.select_options.splice(this.searchSelectAllNodeIndex(), 1)
          this.is_select_all = false
        } else if (has_all_option && !this.is_select_all) {
          this.is_select_all = true
          this.selectAll()
        } else if (!has_all_option && this.is_select_all) {
          this.is_select_all = false
          this.$refs.cascader.$refs.panel.clearCheckedNodes()
          this.select_options = []
        }
        this.$emit('getOptions', this.select_options)
      },
      // 查找全部節(jié)點(diǎn)所在的索引
      searchSelectAllNodeIndex() {
        if (!this.is_deep) {
          return this.select_options.indexOf(this.all_select_flag)
        } else {
          let selectAllOptionIndex = -1
          this.select_options.forEach((res, index) => {
            if (res.length === 1) {
              selectAllOptionIndex = index
            }
          })
          return selectAllOptionIndex
        }
      },
      // 選擇全部
      selectAll() {
        this.select_options = []
        if (!this.is_deep) {
          // 為單層數(shù)據(jù)，即沒有children
          this.options_cascader.forEach(res => {
            this.select_options.push(res[this.value])
          })
        } else {
          // 多層數(shù)據(jù), 遞歸
          this.getDeepOptions(this.options_cascader)
        }
      },
      // 遞歸獲取深層數(shù)據(jù)
      getDeepOptions(value) {
        let arr
        value.forEach(res => {
          if (res.children) {
            // 如果不是最后一層，則緩存當(dāng)前層次的value
            this.deep_option_data.push(res[this.value])
            this.getDeepOptions(res.children)
          } else {
            // 如果是最后一層，把最后一層的value放入級聯(lián)選擇器綁定的數(shù)組
            arr = cloneDeep(this.deep_option_data)
            arr.push(res[this.value])
            this.select_options.push(arr)
          }
        })
        // 每一層循環(huán)結(jié)束后，清空本層的父節(jié)點(diǎn)
        this.deep_option_data.pop()
      }
    }
  }
</script>
 
<style scoped>
 
</style>

// 多層結(jié)構(gòu),帶全部
<my-cascader
    :options="options"
    :is_deep="true" 
    :has_all_select="true"
     @getOptions="getOptions">
</my-cascader>
 
// 單層結(jié)構(gòu)，帶全部
<my-cascader
    :options="options"
    :is_deep="false" 
    :has_all_select="true"
     @getOptions="getOptions">
</my-cascader>
 
// 注：如果不需要配置全部節(jié)點(diǎn)則直接使用element提供的cascader即可
// 本組件只考慮第一層帶有全部的情況，且全部節(jié)點(diǎn)不帶有children屬性，即只有一層，若除第一層節(jié)點(diǎn)外其他層次節(jié)點(diǎn)帶有全部選項，則勾選本層次的上一層節(jié)點(diǎn)即可