组件代码：

<!--/*** 树形下拉选择组件，下拉框展示树形结构，提供选择某节点功能，方便其他模块调用* @author wz* @date 2020-06-09* 调用示例：* <tree-select :height="400" // 下拉框中树形高度*              :width="200" // 下拉框中树形宽度 不填写自适应el-select input框大小*              size="small"  // 输入框的尺寸: medium/small/mini*              :data="data" // 树结构的数据或者普通包含主键，父主键的普通集合:obj="{}"    //可自定义字段，字段映射如下*              multiple   // 多选//默认值：单选可传入数字，字符串，对象；多选传入【数字|字符|对象】数组，其他非法:default-key="..."*              clearable   // 可清空选择*              collapseTags   // 多选时将选中值按文字的形式展示expand-click-node   //点击节点自动展开。多选有效check-click-node // 是否点击节点是选中 多选生效*              checkStrictly // 多选时，严格遵循父子不互相关联 效果参考elementui 对应属性效果*              @getValue="父组件获取值方法"> // 事件有两个参数：第一个是所有选中的节点ID，第二个是所有选中的节点数据*              </tree-select><select-treeobj 字段映射如下，值填写你实际字段，可拓展字段。最终返回主键以及选择对象【全部字段】id:'id',//可改成自己对应主键【改值】label: 'name',// 显示名称children: 'children', //子级字段名path:'path',//路径content:'content',//描述pid:'pid',//父id*/
-->
<template><div><div class="mask" v-show="isShowSelect"></div><el-popover placement="bottom-start"  :width="popoverWidth"    trigger="manual"  v-model="isShowSelect" @hide="popoverHide"><el-tree class="common-tree" :width="width"   ref="tree" :data="treeData" :props="obj":show-checkbox="multiple":node-key="obj.id":check-strictly="checkStrictly":default-expanded-keys="defaultKeys":expand-on-click-node="multiple&&expandClickNode":check-on-click-node="checkClickNode":highlight-current="true"@check-change="nodeClick"@node-click="nodeClick"></el-tree><el-select    slot="reference" ref="select" :size="size"v-model="returnDataKeys":multiple="multiple":clearable="clearable":collapse-tags="collapseTags"@click.native="selectClick"@remove-tag="removeTag"@clear="clean"class="tree-select"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select><el-row><el-button v-if="multiple" class="ok" @click="isShowSelect=false" size="mini" type="text">确定</el-button></el-row></el-popover></div>
</template><script>export default {name: 'test-code',props: {// 树结构数据data: {type: Array,default () {return [];}},obj: {type: Object,required: false,default:()=>{return {id:'id',// IDlabel: 'name',// 显示名称children: 'children', //子级字段名path:'path',//路径content:'content',//描述pid:'pid',//父id}}},// 配置是否可多选multiple: {type: Boolean,default () {return false;}},// 配置是否可清空选择clearable: {type: Boolean,default () {return false;}},// 配置多选时是否将选中值按文字的形式展示collapseTags: {type: Boolean,default () {return false;}},// 显示复选框情况下，是否严格遵循父子不互相关联checkStrictly: {type: Boolean,default () {return false;}},//多选是设置点击节点是否可以选中checkClickNode:{type: Boolean,default () {return false;}},//多选时：点击节点展开还是点三角标expandClickNode:{type: Boolean,default () {return false;}},// 默认选中的节点keydefaultKey: {type: [Number,String,Array,Object],default () {return '';}},size: {type: String,default () {return 'small';}},width: {type: String,default () {return '100%';}},height: {type: String,default () {return '300px';}}},//上面是父组件可传入参数data () {return {popoverWidth:"0px",//下拉框大小isShowSelect: false, // 是否显示树状选择器options: [],//select option选项returnDatas:[],//返回给父组件数组对象returnDataKeys:[],//返回父组件数组主键值};},computed: {treeData() { // 若非树状结构，则转化为树状结构数据return   JSON.stringify(this.data).indexOf(this.obj.children) !== -1 ? this.data :  this.switchTree();},},methods: {init(){// eslint-disable-next-line no-undef,no-debugger// debuggerif(this.defaultKey!=''){if (this.multiple) {// 多选if( Object.prototype.toString.call(this.defaultKey).indexOf("Array")!=-1){if(Object.prototype.toString.call(this.defaultKey[0]).indexOf("Object")!=-1){//对象this. setDatas(this.defaultKey);}else if(Object.prototype.toString.call(this.defaultKey[0]).indexOf("Number")!=-1|| Object.prototype.toString.call(this.defaultKey[0]).indexOf("String")!=-1){this.setKeys(this.defaultKey);}else{console.log("多选：传入参数类型不匹配");return;}}else {console.log("多选：传入参数类型不匹配");return;}} else {// 单选if( Object.prototype.toString.call(this.defaultKey).indexOf("Number")!=-1|| Object.prototype.toString.call(this.defaultKey).indexOf("String")!=-1|| Object.prototype.toString.call(this.defaultKey).indexOf("Object")!=-1 ){this.setKey(this.defaultKey);}else {console.log("单选：传入参数类型不匹配");return;}}}},//下拉框select点击[入口]selectClick(){this.$nextTick(function () {//设置下拉框自适应宽度this.popoverWidth= this.$refs.select.$el.clientWidth-26;})//显示下拉框return this.isShowSelect = !this.isShowSelect},//单选: 树点击方法nodeClick (data, node) {if (!this.multiple) {//单选this.isShowSelect=false;this.setKey(node.key);}else{//多选var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据var t=[];this.options = checkedKeys.map((item) => {//设置option选项var node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的nodet.push(node.data);return {label:node.label,value:node.key};});this.returnDataKeys = this.options.map((item) => {return item.value;});this.returnDatas=t;}},//单选:清空选中clean () {this.$refs.tree.setCurrentKey(null);//清除树选中keythis.returnDatas=null;this.returnDataKeys='';this.popoverHide ();},//单选:设置、初始化值 keysetKey (thisKey) {this.$refs.tree.setCurrentKey(thisKey);var node = this.$refs.tree.getNode(thisKey);this.setData(node.data);},//单选：设置、初始化对象setData(data){this.options = [];this.options.push({label:data[this.obj.label],value:data[this.obj.id]});this.returnDatas = data;this.returnDataKeys=data[this.obj.id]!this.isShowSelect?this.popoverHide():null;},//多选:设置、初始化值 keyssetKeys (thisKeys) {this.$refs.tree.setCheckedKeys(thisKeys);this.returnDataKeys=thisKeys;var t=[];thisKeys.map((item) => {//设置option选项var node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的nodet.push(node.data);return {label:node.label,value:node.key};});this.returnDatas=t;this.popoverHide()},//多选:设置、初始化对象setDatas(data){this.$refs.tree.setCheckedNodes(data);this.returnDatas=data;var t=[];data.map((item) => {//设置option选项t.push(item[this.obj.id]);});this.returnDataKeys=t;this.popoverHide()},// 多选,删除任一select选项的回调removeTag (val) {this.$refs.tree.setChecked(val, false);//设置为未选中var node = this.$refs.tree.getNode(val);//获取节点if (!this.checkStrictly && node.childNodes.length > 0) {this.treeToList(node).map(item => {if (item.childNodes.length <= 0) {this.$refs.tree.setChecked(item, false);}});}this.nodeClick();this.popoverHide ();},//下拉框关闭执行popoverHide () {this.$emit('getValue', this.returnDataKeys, this.returnDatas);},// 多选，清空所有勾选clearSelectedNodes () {var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据for (let i = 0; i < checkedKeys.length; i++) {this.$refs.tree.setChecked(checkedKeys[i], false);}},//树形转为集合treeToList (tree) {var queen = [];var out = [];queen = queen.concat(tree);while (queen.length) {var first = queen.shift();if (first.childNodes) {queen = queen.concat(first.childNodes);}out.push(first);}return out;},switchTree() {return this.buildTree(this.data, this.defaultValue);},// 将一维的扁平数组转换为多层级对象buildTree(data, id) {const fa = (id) => {const temp = [];for (let i = 0; i < data.length; i++) {const n = data[i];if (n[this.obj.pid] === id) {n[this.obj.children] = fa(n[this.obj.id]);temp.push(n);}}return temp;};return fa(id);},},watch: {// eslint-disable-next-line no-unused-varsisShowSelect (val) {// 隐藏select自带的下拉框this.$refs.select.blur();},treeData(){//监听tree数据this.$nextTick(()=> {this.init();})}}};
</script><style scoped>.mask{height: 100%;position: fixed;top: 0;left: 0;opacity: 0;z-index: 11;}.common-tree{overflow: auto;}.tree-select{z-index: 111;}.ok{float: right;}.el-row{padding-top: 0px !important;}
</style>

调用示例：

标签：

<el-form ref="form" :model="form" label-width="80px"><el-form-item label="菜单路径:" prop="menu" ><select-tree size="small" :data="menuFolder" clearable checkStrictly @getValue="setTreeMenu"></select-tree></el-form-item></el-form>

methods:中方法获取值：

 setTreeMenu(key,data){//获取子组件值console.log(key)console.log(data)},

单选效果:

多选效果：