展示：

子組件封裝

<!-- 樹狀選擇器   科室樹形  -->
<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 },