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

！执行

已于 2024-04-14 22:56:37 修改

阅读量837

点赞数 3

文章标签： javascript 前端 vue.js

于 2024-04-14 22:44:48 首次发布

本文链接：https://blog.youkuaiyun.com/sj18838107211/article/details/137756983

版权

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