展示：

子组件封装

<!-- 树状选择器   科室树形  -->
<template><el-popoverref="popover"placement="bottom-start"trigger="click"@show="onShowPopover"@hide="onHidePopover"><el-treeref="tree"class="select-tree"highlight-current:style="`min-width: ${treeWidth}`":data="data":props="props":expand-on-click-node="false":filter-node-method="filterNode":default-expand-all="true"@node-click="onClickNode"></el-tree><el-inputslot="reference"ref="input"v-model="labelModel"clearable:style="`width: ${width}%`":class="{ 'rotate': showStatus }"suffix-icon="el-icon-arrow-down":placeholder="placeholder"></el-input></el-popover>
</template><script>
import { getTreeList } from '@/api/commonApi'
export default {name: 'Pagination',props: {// 接收绑定参数value: {type: String,default: '1'},// 输入框宽度width: String,// 输入框占位符placeholder: {type: String,required: false,default: '请选择'},// 树节点配置选项props: {type: Object,required: false,default: () => ({value: 'key',label: 'title',children: 'children'})}},// 设置绑定参数model: {prop: 'value',event: 'selected'},computed: {// 是否为树状结构数据dataType() {const jsonStr = JSON.stringify(this.options)return jsonStr.indexOf(this.props.children) !== -1},// 若非树状结构，则转化为树状结构数据data() {return this.dataType ? this.options : this.switchTree()}},watch: {labelModel(val) {if (!val) {this.valueModel = ''}this.$refs.tree.filter(val)},value(val) {this.value = val},valueModel(val){if(!val){return}this.timer = setTimeout(() => {this.labelModel = this.queryTree(this.options,val)})}},data() {return {// 树状菜单显示状态showStatus: false,// 菜单宽度treeWidth: 'auto',// 输入框显示值labelModel: '',// 实际请求传值valueModel: '0',// 数据列表options: [],timer:null}},created() {this.value&&this.getLabel(this.value)// 检测输入框原有值并显示对应 labelthis.gettreetable()// 获取输入框宽度同步至树状菜单宽度this.$nextTick(() => {this.treeWidth = `${(this.width || this.$refs.input.$refs.input.clientWidth) - 24}px`})},methods: {getLabel(val){this.labelModel = val},gettreetable() {getTreeList({menuName: 'ehis_dept',pageSearchType: 'all',searchConditions: '[]',sortType: 'asc',sortcol: ['id'],tableType: 'col'}).then((res) => {this.options = res.allData// if (this.value) {this.labelModel = this.queryTree(this.options, this.valueModel)// }}).catch((err) => {console.log(err)})},// 单击节点onClickNode(node) {this.labelModel = node[this.props.label]this.valueModel = node[this.props.value]this.$emit('getdocotorlist', this.valueModel)this.onCloseTree()},// 偏平数组转化为树状层级结构switchTree() {return this.cleanChildren(this.buildTree(this.options, '0'))},// 隐藏树状菜单onCloseTree() {this.$refs.popover.showPopper = false},// 显示时触发onShowPopover() {this.showStatus = truethis.$refs.tree.filter(false)},// 隐藏时触发onHidePopover() {this.showStatus = falsethis.$emit('selected', this.valueModel)},// 树节点过滤方法filterNode(query, data) {if (!query) {return true}return data[this.props.label].indexOf(query) !== -1},// 搜索树状数据中的 IDqueryTree(tree, id) {let stark = []stark = stark.concat(tree)while (stark.length) {const temp = stark.shift()if (temp[this.props.children]) {stark = stark.concat(temp[this.props.children])}if (temp[this.props.value] === id) {return temp[this.props.label]}}return ''},// 将一维的扁平数组转换为多层级对象buildTree(data, id = '0') {const fa = (parentId) => {const temp = []for (let i = 0; i < data.length; i++) {const n = data[i]if (n[this.props.parent] === parentId) {n.children = fa(n.rowGuid)temp.push(n)}}return temp}return fa(id)},// 清除空 children项cleanChildren(data) {const fa = (list) => {list.map((e) => {if (e.children.length) {fa(e.children)} else {delete e.children}return e})return list}return fa(data)}},beforeUpdate(){clearTimeout(this.timer)this.timer = null}
}
</script><style>
.el-input.el-input--suffix {cursor: pointer;overflow: hidden;
}
.el-input.el-input--suffix.rotate .el-input__suffix {transform: rotate(180deg);
}
.select-tree {max-height: 350px;overflow-y: scroll;
}
/* 菜单滚动条 */
.select-tree::-webkit-scrollbar {z-index: 11;width: 6px;
}
.select-tree::-webkit-scrollbar-track,
.select-tree::-webkit-scrollbar-corner {background: #fff;
}
.select-tree::-webkit-scrollbar-thumb {border-radius: 5px;width: 6px;background: #b4bccc;
}
.select-tree::-webkit-scrollbar-track-piece {background: #fff;width: 6px;
}
.el-tree-node.is-current > .el-tree-node__content {background-color: #86bfff !important;color: black;
}
</style>

父组件使用

<select-tree :value="ruleForm.deptId" v-model="ruleForm.deptId" style="width:93%;"/>import SelectTree from '@/components/common/tree/selecttreecopy'components: { SelectTree },