级联选择+select+checkbox器

 因为需求原因element和antd都不包含一级单选。二级多选选择器的选择器，该组件引用了antd的一切icon、card和checkbox组件，如果你用的是element 请替换<a-。  不能复制直接用的代码都是垃圾，废话少说直接上代码。

<template>
  <!-- 折叠下拉面板 -->
  <div ref="main">
    <div class="input-box" @click="handleChangeAddress" ref="barparent">
      <div v-for="(item,indx) in dataList" class="laber-box" :key="indx">
        <span>{{item}}</span>
        <a-icon type="close" class="delete" @click="hedeleDate(item)" />
      </div>
    </div>
    <div class="card-conter" :style="{width:parentClientWidth+'px'}">
      <div class="card-box" v-if="isshow">
        <a-card style="width: 50%">
          <p class="item" v-for="(item,index) in children" :key="index" :class="{'active':active===index}" @click="headleList(item,index)">
            <span>{{item.label}}</span>
            <a-icon type="right" class="po-right" />
          </p>
        </a-card>
        <a-card style="width: 50%" v-show="childrenDate.length!==0">
          <a-checkbox-group v-model="changeDate.displayRule" @change="onChange">
            <a-row>
              <a-col class="item" :span="24" v-for="(item,index) in childrenDate" :key="index" :class="{'active':changeDate.displayRule.includes(item.value)}">
                <a-checkbox :value="item.value">
                  {{item.label}}
                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </a-card>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    treeDate: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    treeDate: {
      handler (newDate) {
        this.headleDate(newDate)
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      active: '',
      show: '',
      isshow: false,
      children: [{
        value: 211001,
        label: '券码号',
        children: [{
          value: 215001,
          label: '二维码'
        }, {
          value: 215002,
          label: '条形码'
        }, {
          value: 215003,
          label: '短链接'
        }]
      },
      {
        value: 211002,
        label: '卡号卡密',
        children: [{
          value: 215001,
          label: '二维码'
        }, {
          value: 215002,
          label: '条形码'
        },]
      },
      {
        value: 211003,
        label: '短链接',
        children: [{
          value: 215001,
          label: '二维码'
        }, {
          value: 215002,
          label: '条形码'
        },]
      },
      {
        value: 211004,
        label: '直充',
        children: [{
          value: 212001,
          label: '手机号'
        }, {
          value: 212003,
          label: '用户账号'
        },]
      }
      ],
      childrenDate: [],
      changeDate: {
        form: '',
        displayRule: []
      },
      laber: '',
      dataList: [],
      parentClientWidth: 0
    }
  },
  methods: {
    // 获取数据之后自动赋值操作
    headleDate (data) {
      this.changeDate = data
      this.children.forEach((item, index) => {
        if (item.value === data.form) {
          this.childrenDate = item.children
          if(item.label){
            this.dataList = [item.label]
            this.laber = item.label
          }
          this.active = index
        }
      })
      this.onChange(data.displayRule)
    },
    // 一级菜单选中的值
    headleList (data, index) {
      this.childrenDate = data.children
      this.changeDate.form = data.value
      this.dataList = [data.label]
      this.laber = data.label
      this.changeDate.displayRule = []
      this.active = index
      this.$emit('Change', this.changeDate)
    },
    // 二级菜单选中的值
    onChange (data) {
      this.changeDate.displayRule = data
      const list = []
      this.childrenDate.forEach(item => {
        if (data.includes(item.value)) {
          list.push(item)
        }
      })
      if(this.laber){
        this.dataList = [this.laber]
      }
      list.forEach(itme => {
        if (!this.dataList.includes(itme.label)) {
          this.dataList.push(itme.label)
        }
      })
      this.$emit('Change', this.changeDate)
    },
    // 删除指定数据
    hedeleDate (item) {
      if (this.laber === item) {
        this.dataList = []
        this.active = ''
        this.changeDate.displayRule = []
        this.laber = ''
        this.changeDate.form = ''
        this.childrenDate = []
      } else {
        this.dataList = this.dataList.filter((x) => x !== item);
        this.changeDate.displayRule = []
        this.childrenDate.forEach(data => {
          if (this.dataList.includes(data.label)) {
            this.changeDate.displayRule.push(data.value)
          }
        })
      }
      this.$emit('Change', this.changeDate)
    },
    // 仿照失焦情况不选中该输入框
    handleChangeAddress () {
      const parentClientWidth = this.$refs.barparent.clientWidth;
      this.parentClientWidth = parentClientWidth
      this.isshow ? this.hide() : this.shows()
    },
    shows () {
      this.isshow = true
      document.addEventListener('click', this.hidePanel, true)
    },
    hide () {
      this.isshow = false
      document.removeEventListener('click', this.hidePanel, true)
      this.$emit('Change', this.changeDate)
    },
    hidePanel (e) {
      if (!this.$refs.main.contains(e.target)) {
        this.hide()
      }
    },
  }
}
</script>

<style scoped lang="less">
.input-box {
  width: 100%;
  height: 34px;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  padding: 0px 10px;
  box-sizing: border-box;
  margin-bottom: 5px;
  &:hover {
    border: 1px solid #40a9ff;
  }
  .laber-box {
    display: inline-block;
    height: 24px;
    line-height: 20px;
    position: relative;
    top: -4px;
    padding: 2px 4px;
    font-size: 12px;
    box-sizing: border-box;
    background: #fafafa;
    border-radius: 2px;
    border: 1px solid #e8e8e8;
    cursor: pointer;
    margin-right: 5px;
    .delete {
      font-size: 12px;
      display: inline-block;
      margin-left: 3px;
      zoom: 0.8;
      position: relative;
      top: -1px;
      &:hover {
        color: #333;
      }
    }
  }
}
.card-conter {
  position: absolute;
  z-index: 1000;
}
.card-box {
  width: 100%;
  display: flex;
  ::v-deep.ant-card-body {
    padding: 0px;
  }
  ::v-deep.ant-checkbox-group {
    width: 100%;
  }
  .item {
    margin: 0;
    padding: 6px 15px;
    &:hover {
      background: #e6f7ff;
      color: #40a9ff;
    }
    .po-right {
      float: right;
    }
  }
  .active {
    background: #e6f7ff;
    color: #40a9ff;
  }
}
</style>

 引用方式

<tree-select @Change="headleTree" :treeDate="treeDate"></tree-select>

headleTree. 选中的事件

treeDate：默认展示的值。格式

treeDate:{
  form:'',
  displayRule:[]
},