Ant design vue3.xx ＜a-tree＞ 带有搜索功能树形组件

<template>
	<div class="containerTree">
		<a-card :bordered="false" style="margin-bottom: 10px; height: 92%">
			<div>
				<a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="请输入站点名称" />
			</div>
			<div>
				<a-tree
					:expanded-keys="expandedKeys"
					:auto-expand-parent="autoExpandParent"
					:tree-data="gData"
					@expand="onExpand"
				>
					<template #title="{ title }">
						<span v-if="title.indexOf(searchValue) > -1">
							{{ title.substr(0, title.indexOf(searchValue)) }}
							<span style="color: #f50">{{ searchValue }}</span>
							{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
						</span>
						<span v-else>{{ title }}</span>
					</template>
				</a-tree>
			</div>
		</a-card>
	</div>
</template>
  <script setup>
import { ref, watch } from 'vue'

const genData = [
	{
		title: '煤矿供电系统',
		key: '0-0',
		children: [
			{
				title: '工广35kV宝电站',
				key: '0-0-0',
				children: [
					{
						title: '0-0-0-0',
						key: '0-0-0-0'
					},
					{
						title: '0-0-0-1',
						key: '0-0-0-1'
					},
					{
						title: '0-0-0-2',
						key: '0-0-0-2'
					}
				]
			},
			{
				title: '白藁塔35kV宜电站',
				key: '0-0-1',
				children: [
					{
						title: '南五1年家电所',
						key: '0-0-1-0'
					},
					{
						title: '南三安电所',
						key: '0-0-1-1'
					},
					{
						title: '南五24交电所',
						key: '0-0-1-2'
					}
				]
			}
		]
	}
]

let dataList = []

const convertToArray = (tree, parentKey = null) => {
	tree.forEach((node) => {
		// 将当前节点信息添加到一维数组中
		dataList.push({
			key: node.key,
			parentKey: parentKey,
			title: node.title
		})

		// 如果当前节点有子节点，则递归调用 convertToArray 处理子节点
		if (node.children && node.children.length > 0) {
			const childrenArray = convertToArray(node.children, node.key)
			dataList.push(...childrenArray)
		}
	})

	return dataList
}
convertToArray(genData)

const getParentKey = (key, tree) => {
	let parentKey
	for (let i = 0; i < tree.length; i++) {
		const node = tree[i]
		if (node.children) {
			if (node.children.some((item) => item.key === key)) {
				parentKey = node.key
			} else if (getParentKey(key, node.children)) {
				parentKey = getParentKey(key, node.children)
			}
		}
	}
	return parentKey
}

const expandedKeys = ref([])
const searchValue = ref('')
const autoExpandParent = ref(true)
const gData = ref(genData)
const onExpand = (keys) => {
	expandedKeys.value = keys
	autoExpandParent.value = false
}
watch(searchValue, (value) => {
	console.log(dataList)
	// 一维数组
	const expanded = dataList
		.map((item) => {
			if (item.title.indexOf(value) > -1) {
				console.log(item.key, gData.value) //多维度数组
				return getParentKey(item.key, gData.value)
			}
			return null
		})
		.filter((item, i, self) => item && self.indexOf(item) === i)
	expandedKeys.value = expanded
	searchValue.value = value
	autoExpandParent.value = true
})
</script>

<style lang="less" scoped>
.containerTree {
	width: 210px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
</style>