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

成长中的向日葵

于 2024-11-04 10:20:59 发布

阅读量311

点赞数

文章标签： javascript 前端 vue.js

原文链接：https://blog.csdn.net/sj18838107211/article/details/137756983?spm=1001.2014.3001.5502

版权

<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>

在这里插入图片描述

<template>
	<div class="containerTree">
		<a-card :bordered="false" style="margin-bottom: 10px; height: 92%">
			<div>
			</div>
			<div>
				<a-tree
					:expanded-keys="expandedKeys"
					:auto-expand-parent="autoExpandParent"
					:tree-data="gData"
					@expand="onExpand"
                    defaultExpandAll
                     checkStrictly 
                     checkable
				>
					<template #title="{ title }">
						<span v-if="title.indexOf(searchValue) > -1">
							{{ title.substr(0, title.indexOf(searchValue)) }}
							<span style="color: #1890ff">{{ 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 = true
}
const handleSearchData=(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
}
 defineExpose({ handleSearchData });
</script>
 
<style lang="less" scoped>
.containerTree {
	width:400 px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
</style>

  <Tree  ref="childRef" @emitCheckedId="getCheckedId" :nameLike="nameLike"></Tree>

 // 处理搜索事件
  const handleSearch = () => {
    fetchData()
  }
  // 初始化加载数据
  const fetchData = () => {
   
    if (childRef.value) {
      console.log('childRef.value',childRef.value)
        childRef.value.handleSearchData(nameLike.value);
      }
  }
  const childRef = ref(null);

参考：https://blog.csdn.net/sj18838107211/article/details/137756983?spm=1001.2014.3001.5502