el-tree与el-select结合，vue组件

<template>
    <div class="qhTree-main">
       <el-select
        style="text-overflow: ellipsis;"
        size="mini"
        ref="selectTree"
        v-model="checkName"
        placeholder="请选择...">
        <el-option
          :value="treeData"
          style="height: auto"
        >
          <el-tree
            ref="tree"
            lazy
            show-checkbox
            :load="loadFolder"
            node-key="id"
            empty-text="无匹配数据"
            :props="{children: 'children',label: 'name',isLeaf: 'leaf'}"
            @check-change="handleCheckChange"
          />
        </el-option>
      </el-select>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      checkName: '',
      treeData: '',
      tempData: [],
      timer: ''
    }
  },
  props: {},
  components: {},
  computed: {
    ...mapGetters({
      userInfo: 'getUserInfo'
    })
  },
  watch: {},
  mounted () {},
  methods: {
    loadFolder (node, resolve) { // 获取区划列表，这个按需使用
      if (node.data === undefined && this.userInfo.code === '0') { // 获取省
        // debugger
        this.$store.dispatch('', {code: this.userInfo.code, op: 2}).then((res) => {
          if (res.data.code === 1) {
            resolve(res.data.result)
          }
        }).catch(err => { console.log(err) })
      } else if (node.data.id.length === 2 || node.data.id.length === 4) { // 获取市县
        // debugger
        this.$store.dispatch('', {code: node.data.id, op: 2}).then((res) => {
          if (res.data.code === 1) {
            resolve(res.data.result)
          }
        }).catch(err => { console.log(err) })
      } else if (node.data.id.length === 6) { // 获取乡镇
        // debugger
        this.$store.dispatch('', {code: node.data.id}).then((res) => {
          if (res.data.code === 1) {
            resolve(res.data.result)
          }
        }).catch(err => { console.log(err) })
      } else { // 获取社区
        // debugger
        this.$store.dispatch('', {code: node.data.id}).then((res) => {
          if (res.data.code === 1) {
            resolve(res.data.result)
          }
        }).catch(err => { console.log(err) })
      }
    },
    handleCheckChange (data, checked, indeterminate) { // 多选
      if (checked) {
        if (data.source !== 0) {
          this.tempData.push(data)
        }
      } else {
        this.tempData.forEach((ele, index) => {
          if (ele.id === data.id) {
            this.tempData.splice(index, 1) // 根据下标删除不需要的对象
          }
        })
      }
      let _this = this
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => { // 全选时会多次触发，设置防抖
        _this.putOut()
      }
        , 500)
    },
    putOut (data) {
      let zw = []
      let code = []
      this.tempData.forEach((ele, index) => {
        zw.push(ele.name)
        code.push(ele.id)
      })
      // debugger
      this.checkName = zw.toString()
      console.log(this.checkName, 'this.checkName')
      // console.log(code.toString(), 'code')
      this.$emit('qhCheckData', {code: code.toString(), zw: this.checkName})
      // this.$refs.tree.setCheckedKeys([])// 清空选择
      // this.tempData = []
    }
  }
}
</script>
<style lang="less" scoped>
.qhTree-main{
  width: 100%;
  height: 100%;

}
 /deep/ .el-select-dropdown__item, .selected, .hover{//dialog样式应设在总的外边
    background-color: #fff;
  }
</style>

在父组件，

<qhTree @qhCheckData="getCheckData" style="display: inline-block;width: 300px;">
</qhTree>





  getCheckData (val) { // 区划树传参
    // debugger
    this.qhCheckData = val
  }