el-tree单选加节点过滤

<template>
	<div class="eltree">
		<el-input v-model="filterText" placeholder="Filter keyword" />
		<el-tree
			ref="tree"
			:data="treeData"
			show-checkbox
			node-key="id"
			:props="defaultProps"
			:check-strictly="true"
			@check-change="selectTreeNode"
			:filter-node-method="filterNode"
		></el-tree>
	</div>
</template>
 
<script>
export default {
	name: "eltree",
	data() {
		return {
			treeData: [
				{
					id: 1,
					label: "一级 1",
					children: [
						{
							id: 4,
							label: "二级 1-1",
							children: [
								{
									id: 9,
									label: "三级 1-1-1",
								},
								{
									id: 10,
									label: "三级 1-1-2",
								},
							],
						},
					],
				},
				{
					id: 2,
					label: "一级 2",
					children: [
						{
							id: 5,
							label: "二级 2-1",
						},
						{
							id: 6,
							label: "二级 2-2",
						},
					],
				},
				{
					id: 3,
					label: "一级 3",
					children: [
						{
							id: 7,
							label: "二级 3-1",
						},
						{
							id: 8,
							label: "二级 3-2",
						},
					],
				},
			],
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			filterText: '',
		};
	},
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val);
		}
	},
	methods: {
		/**
		   * @description:  选择树节点
		   * @param {Obejct} data 该节点所对应的对象
		   * @param {Obejct} node 该节点所对应的Node
		   * @param {Obejct} tree 节点组件本身
		   */
		selectTreeNode(data, checked, tree) {
			if (checked) {
				this.$refs.tree.setCheckedNodes([data])
				this.filterText = data.label
			}
			console.log(data, checked, tree)
		},
		filterNode(value, data) {
			if (!value) return true
			return data.label.indexOf(value) !== -1
		}
	},
};
</script>