ElementUI下拉框点击展示树形结构

<template>
	<div class="main">
		<el-popover class="select-tree" placement="bottom-start" width="500" trigger="click"
			v-model="visible" @hide="hidePopover">
			<el-input ref="input" slot="reference" placeholder="请选择" v-model="text" size="small" clearable
				@input="treeFilter" @clear="clear" />
			<el-tree ref="tree" class="tree" :data="data" node-key="id" @node-click="handleNodeClick" />
		</el-popover>
	</div>
</template>

<script>
export default {

	data () {
		return {
			visible: false, // 显示下拉窗
			text: '', // 选中值-中文
			expandedArr: [], // 展开的节点集合
			data: [{
				label: '一级 1',
				children: [{
					label: '二级 1-1',
					children: [{
						label: '三级 1-1-1'
					}]
				}]
			}, {
				label: '一级 2',
				children: [{
					label: '二级 2-1',
					children: [{
						label: '三级 2-1-1'
					}]
				}, {
					label: '二级 2-2',
					children: [{
						label: '三级 2-2-1'
					}]
				}]
			}, {
				label: '一级 3',
				children: [{
					label: '二级 3-1',
					children: [{
						label: '三级 3-1-1'
					}]
				}, {
					label: '二级 3-2',
					children: [{
						label: '三级 3-2-1'
					}]
				}]
			}],
		}
	},
	mounted () {
		this.handelSelect() //如果是从页面一开始进来，需要从这里触发（因为watch监测不到变化）
	},
	watch: {
		value: function (val) {
			console.log("value", val)
			this.handelSelect()
		},
		data: function (val) {
			console.log("data", val)
			this.$nextTick(() => {
				this.handelSelect()
			})
		}
	},
	methods: {
		clear () {
			this.$refs.tree.setCurrentKey(null)
			this.text = ''
		},
		treeFilter (val) {
			this.visible = true
			this.$refs.tree.filter(val)
			if (val == '') {
				this.$refs.tree.setCurrentKey(null)
			}
		},
		// 下拉框关闭
		hidePopover () {
			let node = this.$refs.tree.getCurrentNode()
			this.$refs.tree.filter('')
			if (node) {
				this.text = node.label
			} else {
				this.text = ''
			}
		},
		// 默认选中
		handelSelect () {
			let node = this.$refs.tree.getNode(this.value)
			if (node) {
				this.$refs.tree.setCurrentKey(this.value)
				this.text = node.label
			} else {
				this.$refs.tree.setCurrentKey(null)
				this.text = this.value
			}
		},
		// 点击回调
		handleNodeClick (node) {
			if (node.disable) {
				return false
			}
			this.visible = false
			this.text = node.label
		}
	}
}
</script>
<style lang="scss">
.main {
	width: 500px;
	margin: 0 auto;
	.select-tree {
		width: 500px;
		max-height: 350px;
		overflow: auto;
		.el-tree-node.is-current > .el-tree-node__content {
			background: rgba(236, 245, 255, 0.8);
			color: #409eff;
		}
	}
}
</style>

参考博客地址：https://blog.csdn.net/qq_32615575/article/details/104611819