vue+element 下拉选项 树状单选

一、先上效果图：

二、index.vue

<template>
    <div class="city-tree-wraper">
		<h4>选项树状列表单选</h4>
		<el-input placeholder="请选择" 
			:suffix-icon="isShowSelectTree?'el-icon-arrow-up':'el-icon-arrow-down'"
			@click.native.stop="isShowSelectTree=!isShowSelectTree"
			v-model="checkedLabel"
			:readonly="true"
		>
		</el-input>
		<el-card class="box-card" v-show="isShowSelectTree">
			<el-tree
				class="filter-tree"
				ref="tree"
				node-key="id"
				:data="data"
				:props="defaultProps"
				:default-expanded-keys="[1,4]"
				@node-click="handleChecked"
				:current-node-key="checkedKeys"
				highlight-current
			>
			</el-tree>
		</el-card>
    </div>
</template>
<script>
  export default {
	mounted () {
		//判断点击的是否是类型下拉区域
		document.addEventListener('click', this.bodyCloseMenus)
	},
	destroyed () {
		document.removeEventListener('click', this.bodyCloseMenus)
	},
    methods: {
		//页面其他区域点击关闭分类
		bodyCloseMenus () {
			if (this.isShowSelectTree) {
				this.isShowSelectTree = false
			}
		},
		// 选择树状结构
		handleChecked(data){
			if(data.disabled){
				this.$refs.tree.setCurrentNode(this.checkedNode) 
				return false;
			}
			this.$nextTick(()=>{
				this.checkedKeys = data.id;
				this.checkedLabel = data.label;
				this.checkedNode = data;
				this.isShowSelectTree = false;
				this.$refs.tree.setCurrentNode(data) 
			})
		},
    },
    data() {
		return {
			checkedKeys:9,
			checkedLabel:'三级 1-1-1',
			checkedNode:{
				id: 9,
				label: '三级 1-1-1'
			},
			isShowSelectTree:false,
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			data: [{
				id: 1,
				label: '一级 1',
				disabled:true,
				children: [{
					id: 4,
					label: '二级 1-1',
					disabled:true,
					children: [{
						id: 9,
						label: '三级 1-1-1'
					}, {
						id: 10,
						label: '三级 1-1-2'
					}]
				}]
			}, {
				id: 2,
				label: '一级 2',
				disabled:true,
				children: [{
					id: 5,
					label: '二级 2-1'
				}, {
					id: 6,
					label: '二级 2-2'
				}]
			}, {
				id: 3,
				label: '一级 3',
				disabled:true,
				children: [{
					id: 7,
					label: '二级 3-1'
				}, {
					id: 8,
					label: '二级 3-2'
				}]
			}, {
				id: 11,
				label: '一级 2',
				disabled:true,
				children: [{
					id: 13,
					label: '二级 2-1'
				}, {
					id: 14,
					label: '二级 2-2'
				}]
			}, {
				id: 12,
				label: '一级 3',
				disabled:true,
				children: [{
					id: 15,
					label: '二级 3-1'
				}, {
					id: 16,
					label: '二级 3-2'
				}]
			}],
		};
    }
  };
</script>
<style lang="scss" scoped>
.city-tree-wraper{
	width: 300px;
	margin: 10px;
}
.box-card{
	margin-top: 5px;
	max-height: 300px;
	overflow: auto;
}
</style>