element下拉树形选择框

封装子组件treeSelect

<template>
  <el-select v-model="valueTitle"
             placeholder="请选择"
             :clearable="clearable"
             @clear="clearHandle">
    <el-option :value="valueTitle"
               :label="valueTitle"
               class="options">
      <el-tree id="tree-option"
               ref="selectTree"
               :accordion="accordion"
               :data="options"
               :props="props"
               :node-key="props.value"
               :default-expanded-keys="defaultExpandedKey"
               @node-click="handleNodeClick">
      </el-tree>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "el-tree-select",
  props: {
    // 配置项
    props: {
      type: Object,
      default: () => {
        return {
          value: 'value',             // ID字段名
          label: 'title',         // 显示名称
          children: 'children'    // 子级字段名
        };
      }
    },

    // 选项列表数据(树形结构的对象数组)
    options: { type: Array, default: () => { return [] } },

    // 初始值
    value: { type: String, default: () => { return null } },

    // 可清空选项
    clearable: { type: Boolean, default: () => { return true } },

    // 自动收起
    accordion: { type: Boolean, default: () => { return false } }
  },

  data () {
    return {
      valueId: null,
      valueTitle: '',
      defaultExpandedKey: []
    }
  },
  mounted () {
    this.valueId = this.value,    // 初始值
      this.initHandle()
  },
  methods: {
    // 初始化值
    initHandle () {
      if (this.valueId) {
        setTimeout(() => {
          window.console.log(this.options)
          this.valueTitle = this.$refs.selectTree.getNode(Number(this.valueId)).data[this.props.label]     // 初始化显示
          this.$refs.selectTree.setCurrentKey(Number(this.valueId))       // 设置默认选中
          this.defaultExpandedKey = [this.valueId]      // 设置默认展开
        }, 500);
      } else {
        this.valueTitle = ""
      }
      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)
      })
    },

    // 切换选项
    handleNodeClick (node, obj) {
      console.log(node, '1111111111111111111111111');
      // if(obj.level <= 1 ) return false
      this.valueTitle = node[this.props.label]
      this.valueId = node[this.props.value]
      this.$emit('getValue', [this.valueId, this.valueTitle])
      this.defaultExpandedKey = []
    },

    // 清除选中
    clearHandle () {
      this.valueTitle = ''
      this.valueId = null
      this.defaultExpandedKey = []
      this.clearSelected()
      this.$emit('getValue', [this.valueId, this.valueTitle])
    },

    // 清空选中样式
    clearSelected () {
      let allNode = document.querySelectorAll('#tree-option .el-tree-node')
      allNode.forEach((element) => element.classList.remove('is-current'))
    }

  },

  watch: {
    value () {
      this.valueId = this.value
      this.initHandle()
    }
  },
}
</script>

<style scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 274px;
  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;
}
</style>

父组件引用

<SelectTree placeholder="请选择归属组织"
                      style="width: 200px"
                      ref="deptTreeSelected"
                      :props="defaultProps"
                      :options="treeData"
                      :value="queryParams.deptId"
                      :clearable="true"
                      :accordion="true"
                      @getValue="getTreeSelected($event)" />


import SelectTree from "@/components/treeSelect";

 treeData: [],
      // 初始展开
      valueId: '',
      defaultProps: {
        id: 'id',
        value: 'value',
        children: 'children',
        label: 'name'

      },


 /** 查询归属组织下拉树结构 */
    getTreeselect () {
      sysDeptApi.getOrgTree().then((res) => {
        this.treeData = res.data
      })
    },


getTreeSelected (val) {
      console.log('val-----', val);
      this.queryParams.deptId = val[0]
      // this.form.deptName = val[1]
    },


        

数据类型：