vue项目中整合elementui中的下拉框和树，实现下拉框树形多选

1.创建子组件

在文件夹中新建子组件select-tree.vue
具体代码如下所示：

<!--* 下拉树形选择 组件-->
<template>
    <el-select ref="select" style="min-width: 260px" :value="value" v-model="valueName" collapse-tags :multiple="multiple" :clearable="clearable" @change="changeValue">
      <!-- @clear="clearHandle" -->
      <el-option :value="valueName" class="options">
        <el-tree
          show-checkbox
          :default-expanded-keys="openTree"
          id="tree-option"
          ref="selectTree"
          :accordion="accordion"
          :data="options"
          :props="props"
          :node-key="props.value"
          @check-change="handleCheckChange"
        >
          <span slot-scope="{ data }"> <i :class="[data.color != null ? 'ification_col' : '']" :style="{ 'background-color': data.color }"></i>&nbsp;&nbsp;{{ data.orgName }} </span>
        </el-tree>
      </el-option>
    </el-select>
  </template>
  <script>
  import { searchDirectory} from "@/api/record";
  export default {
    name: 'elSelectTree',
    props: {
      // 配置项
      props: {
        type: Object,
        default: () => {
          return {
            value: 'orgid',
            children: 'child',
            label: 'orgName'
          }
        }
      },
      // 初始值（单选）
      value: {
        type: Object,
        default: () => {
          return {}
        }
      },
      // 初始值（多选）
      valueMultiple: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 可清空选项
      clearable: {
        type: Boolean,
        default: false
      },
      // 自动收起
      accordion: {
        type: Boolean,
        default: false
      },
      // 是否支持多选
      multiple: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        options: [],
        resultValue: [], // 传给父组件的数组对象值
        valueName: [], // 输入框显示值
        openTree: [] // 需要展开的id
      }
    },
    watch: {
      value () {
        this.resultValue = this.valueMultiple // 初始值
        this.initHandle()
      }
    },
    mounted () {
      this.getSelectTreeList()
      this.resultValue = this.valueMultiple // 初始值
      this.initHandle()
    },
    methods: {
      // 获取 部门 tree
      async getSelectTreeList() {
        await searchDirectory().then(res=>{
            this.options=res.data.obj
               if (res.data.obj.length) {
                   // 默认展开的 id
                   res.data.obj.forEach((item) => {
                console.log(item);
              this.openTree.push(item.orgid)
              if (item.child && item.child.length > 0) {
                this.openTreeList(item.child)
              }
            })
          }
        })
        // this.$api.dept.findDeptTree().then((res) => {
        //   if (res.data.length) {
        //     const { children } = res.data[0] || {}
        //     this.options = children
        //     // 默认展开的 id
        //     this.options.forEach((item) => {
        //       this.openTree.push(item.id)
        //       if (item.children && item.children.length > 0) {
        //         this.openTreeList(item.children)
        //       }
        //     })
        //   }
        // })
      },
      // 初始化显示
      initHandle () {
        if (this.resultValue) {
          this.resultValue.forEach((item) => this.valueName.push(item.orgName))
        }
        this.initScroll()
      },
      // 初始化滚动条
      initScroll () {
        this.$nextTick(() => {
          let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
          let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
          scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
          scrollBar.forEach((ele) => (ele.style.width = 0))
        })
      },
      // 从输入框中直接删除某个值时
      changeValue (val) {
        // 多选（同时删掉传给父组件中多余的值，再传给父组件）
        this.resultValue.map((item, index) => {
          let i = val.indexOf(item.orgName)
          if (i === -1) {
            this.resultValue.splice(index, 1)
          }
        })
        this.$emit('getValue', this.resultValue)
      },
      // 勾选 /反选
      handleCheckChange (data, checked, indeterminate) {
        this.valueName = []
        if (checked) {
          // 选中
          if (!data.child.length) {
            this.resultValue.push(data)
          }
        } else {
          // 取消勾选   
          this.resultValue.map((item, index) => {
            if (data.orgName === item.orgName) {
              this.resultValue.splice(index, 1)
              console.log(this.resultValue,'11111111111');
            }
          })
        }
        this.resultValue.forEach((item) => {
          this.valueName.push(item.orgName) // 输入框显示值
        })
        this.$emit('getValue', this.resultValue)
      },
      // 默认展开全部
      openTreeList (list) {
        list.forEach((item) => {
          this.openTree.push(item.orgid)
          if (item.child && item.child.length) {
            this.openTreeList(item.child)
          }
        })
      }
  
      // 清除选中
      // clearHandle () {
      //   this.valueName = []
      //   this.resultValue = []
      //   this.clearSelected()
      //   this.$emit('getValue', this.resultValue)
      // },
      // // 清空选中样式
      // clearSelected () {
      //   let allNode = document.querySelectorAll('#tree-option .el-tree-node')
      //   allNode.forEach((element) => element.classList.remove('is-current'))
      // }
    }
  }
  </script>
  <style lang="scss" scoped>
  .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    max-height: 300px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
  }
  
  .el-select-dropdown__item.selected {
    font-weight: normal;
  }
  
  ul li >>> .el-tree .el-tree-node__content {
    height: auto;
    padding: 0 20px;
  }
  
  .el-tree-node__label {
    font-weight: normal;
  }
  
  .el-tree >>> .is-current .el-tree-node__label {
    color: #409eff;
    font-weight: 700;
  }
  
  .el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
    color: #606266;
    font-weight: normal;
  }
  
  .el-popper {
    z-index: 9999;
  }
  
  .ification_col {
    width: 20px;
    height: 10px;
    display: inline-block;
  }
  
  .el-select-dropdown__item::-webkit-scrollbar {
    display: none !important;
  }
  
  .el-select {
    ::v-deep.el-tag__close {
      display: none !important; //隐藏在下拉框多选时单个删除的按钮
    }
  }
  </style>
  
 复制

2. 在父组件中引入进去

具体代码如下所示：

//html部分
<div class="app-container">出车单位：
                <el-select-tree :valueMultiple="valueMultiple" @getValue="getSelectedValue"></el-select-tree>
  </div>
  //script部分
import elSelectTree from './components/select-tree.vue'
export default {
components: {
        elSelectTree
  },
  data(){
        return {           
             valueMultiple: []
        }
    },
    methods:{
    getSelectedValue (value) {
            console.log('选中的结果值', value)
        },
    }
  }复制

以上为本功能全部代码，具体情况需要视功能而定，欢迎讨论