el-cascader 级联选择器

三级类目一级单选，二三级多选

1. 父组件 写法

<CheckCascader @change="getSelectList" />

 getSelectList(data){
     console.log(data)
}

2. 子组件写法

<template>
  <div style="width:100%">
    <el-cascader
      ref="tree"
      v-model="value"
      :options="optionsData"
      :props="propsInfo"
      clearable
      collapse-tags
      @change="changeLabel"
    />
  </div>
</template>

<script>
import { getCategoryAndParentVOList } from '@/api/user/list';
export default {
  name:'CheckCascader',
  data() {
    return {
      value: [],
      shareScopeEnd: [],
      optionsData:[],
      propsInfo:{
        value: 'id',
        label: 'name',
        children:'childList',
        multiple: true, 
        // checkStrictly: true
      },
      level1: false,
      level2: false,
    }
  },
  mounted(){
  // 获取数据  数据必须满足三级
    getCategoryAndParentVOList().then((res) => {
      this.optionsData = res.data
    });
  },
  methods: {
    changeLabel(val) {
      this.level1 = false
      this.level2 = false
      if (this.shareScopeEnd.length == 0) {
        this.value = val
      } else {
        let arrValue1 = []
        let arrValue2 = []
        val.forEach((item,index) => {
          if (item[0] !== this.shareScopeEnd[0][0]) { // 一级标签不同
            arrValue1.push(item)
            this.level1 = true
          } else {
            this.level2 = true;
            arrValue2.push(item)
          }
        })
        if (this.level1) {
          this.value = arrValue1;
        } else {
          this.value = arrValue2;
        }
      }
      this.shareScopeEnd = this.value
      const lastDate=[]
      this.value.forEach(item=>{
        lastDate.push(item[2])
      })
      this.$emit('change',lastDate)
    }
  }
}
</script>

<style lang="less" scoped>
.el-cascader{
    width: 100%;
}
</style>

三级类目一二级单选,三级多选

1. 父组件 写法

<CheckCascader @change="getSelectList" />

 getSelectList(data){
     console.log(data)
}

2. 子组件写法

<template>
  <div style="width:100%">
    <el-cascader
      ref="tree"
      v-model="value"
      :options="optionsData"
      :props="propsInfo"
      clearable
      collapse-tags
      @change="changeLabel"
    />
  </div>
</template>

<script>
import { getCategoryAndParentVOList } from '@/api/user/list';
export default {
  name:'CheckCascader',
  data() {
    return {
      value: [],
      shareScopeEnd: [],
      optionsData:[],
      propsInfo:{
        value: 'id',
        label: 'name',
        children:'childList',
        multiple: true, 
        // checkStrictly: true
      }
    }
  },
  mounted(){
    getCategoryAndParentVOList().then((res) => {
      this.optionsData = res.data
    });
  },
  methods: {
    changeLabel(val) {
      let changeFlag = false
      let changeItem = null
      if (this.shareScopeEnd.length == 0) {
        this.value = val
      } else {
       // 与原数组比对
         this.value.forEach((item) => {
           if (item[0] !== this.shareScopeEnd[0][0]) { // 一级标签不同
             changeFlag = true
             changeItem = item
           } else if ((!item[1] && this.shareScopeEnd[0][1]) || (item[1] && !this.shareScopeEnd[0][1])) { 
             changeFlag = true
             changeItem = item
         } else if ((!item[2] && this.shareScopeEnd[0][2]) || (item[2] && !this.shareScopeEnd[0][2])) {
             changeFlag = true
             changeItem = item
        }
         })
      }
       if (changeFlag) {
         this.value = []
         this.value.push(changeItem)
       }
      this.shareScopeEnd = this.value
      const lastDate=[]
      this.value.forEach(item=>{
        lastDate.push(item[2])
      })
      this.$emit('change',lastDate)
    }
  }
}
</script>

<style lang="less" scoped>
.el-cascader{
    width: 100%;
}
</style>