Tree drop-down selection box El select combined with El tree effect demo (sorting)

design sketch ：

<template>
	<div class="box">
		<el-select size="small" placeholder=" Please select " clearable v-model="selectLabel" @clear="selectClear">
			<el-option class="option-style" :label="selectLabel" :value="selectValue">
				<el-input class="search" size="small" placeholder=" Enter keywords to filter " 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, // Click on the style 
				keywork: null, // Search for keywords 
				selectLabel: null, // The drop-down box displays the name 
				selectValue: null, // The drop-down box displays ID
				treeDate: [{
    
						label: " Lord - test 0",
						value: 0,
						children: [{
    
							label: " Son - test 0",
							value: 6
						}]
					},
					{
    
						label: " Lord - test 1",
						value: 1,
						children: [{
    
							label: " Son - test 1",
							value: 7
						}]
					},
					{
    
						label: " Lord - test 2",
						value: 2,
						children: [{
    
							label: " Son - test 2",
							value: 8
						}]
					},
					{
    
						label: " Lord - test 3",
						value: 3,
						children: [{
    
							label: " Son - test 3",
							value: 9
						}]
					},
					{
    
						label: " Lord - test 4",
						value: 4,
						children: [{
    
							label: " Son - test 4",
							value: 10
						}]
					},
					{
    
						label: " Lord - test 5",
						value: 5,
						children: [{
    
								label: " Son - test 6",
								value: 11
							},
							{
    
								label: " Son - test 7",
								value: 12
							}
						]
					}
				],
				treeProps: {
    
					children: "children",
					label: "label"
				}
			}
		},
		props: {
    
			// treeDate: {
    // Tree data 
			//   type: Array,
			//   default: ()=>{
    }
			// },
			// treeProps: {
    // Tree rule 
			//   type: Object,
			//   default: ()=>{
    }
			// },
			showCheckbox: {
     // Whether you can choose 
				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>