树形下拉选择框el-select结合el-tree效果demo（整理）

效果图：

<template>
	<div class="box">
		<el-select size="small" placeholder="请选择" clearable v-model="selectLabel" @clear="selectClear">
			<el-option class="option-style" :label="selectLabel" :value="selectValue">
				<el-input class="search" size="small" placeholder="输入关键字进行过滤" v-model="keywork" @click.stop.native>
				</el-input>
				<el-tree ref="tree" :data="treeDate" :props="treeProps" :show-checkbox="showCheckbox"
					:filter-node-method="filterNode" @node-click="nodeClick" @check-change="checkChange">
					<div slot-scope="{node, data}">
						<i class="el-icon-warning-outline"></i>
						<span :class="[{'tree-click': treeClick==data.value}]">{
    {
    data.label}}</span>
					</div>
				</el-tree>
			</el-option>
		</el-select>
	</div>
</template>

<script>
	export default {
    
		name: "test",
		components: {
    

		},
		data() {
    
			return {
    
				treeClick: null, //点击样式
				keywork: null, //搜索关键字
				selectLabel: null, //下拉框显示名称
				selectValue: null, //下拉框显示ID
				treeDate: [{
    
						label: "主-测试0",
						value: 0,
						children: [{
    
							label: "子-测试0",
							value: 6
						}]
					},
					{
    
						label: "主-测试1",
						value: 1,
						children: [{
    
							label: "子-测试1",
							value: 7
						}]
					},
					{
    
						label: "主-测试2",
						value: 2,
						children: [{
    
							label: "子-测试2",
							value: 8
						}]
					},
					{
    
						label: "主-测试3",
						value: 3,
						children: [{
    
							label: "子-测试3",
							value: 9
						}]
					},
					{
    
						label: "主-测试4",
						value: 4,
						children: [{
    
							label: "子-测试4",
							value: 10
						}]
					},
					{
    
						label: "主-测试5",
						value: 5,
						children: [{
    
								label: "子-测试6",
								value: 11
							},
							{
    
								label: "子-测试7",
								value: 12
							}
						]
					}
				],
				treeProps: {
    
					children: "children",
					label: "label"
				}
			}
		},
		props: {
    
			// treeDate: {
    //树状数据
			//   type: Array,
			//   default: ()=>{
    }
			// },
			// treeProps: {
    //树状规则
			//   type: Object,
			//   default: ()=>{
    }
			// },
			showCheckbox: {
     //是否可选择
				type: Boolean,
				default: true
			}
		},
		methods: {
    
			selectClear() {
    
				this.treeClick = null;
				this.selectLabel = null;
				this.selectValue = null;
			},
			filterNode(value, data) {
    
				if (!value) {
    
					return true;
				}
				return data.label.indexOf(value) !== -1;
			},
			nodeClick(obj, node) {
    
				this.treeClick = obj.value;
				this.selectLabel = obj.label;
				this.selectValue = obj.value;
				console.log(obj, node);
			},
			checkChange(obj, node) {
    
				console.log(obj, node);
			},
		},
		watch: {
    
			keywork(val) {
    
				this.$refs.tree.filter(val);
			}
		},
		computed: {
    

		},
		created() {
    

		},
		mounted() {
    

		},
		beforeDestroy() {
    

		}
	}
</script>

<style scoped>
	.box {
    
		width: 100%;
		height: 100%;
		margin: 1rem;
	}

	.search {
    
		width: calc(100% - 8px - 0.5rem);
		margin: 0 0.5rem;
	}

	.option-style {
    
		padding: 0;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}

	.tree-click {
    
		color: #4D74D6;
		font-weight: 600;
	}

	/deep/ .el-tree-node__content {
    
		padding: 0.25rem;
	}

	/deep/ .el-icon-caret-right {
    
		font-size: 0;
	}
</style>