树形结构在日常开发中非常常见，例如菜单、组织架构等场景。Element-UI作为一款基于Vue.js的桌面端组件库，提供了丰富的组件供开发者使用。其中，Tree组件可以轻松实现树形结构的展示。但在实际项目中，我们往往需要实现可搜索的树形结构，以便用户能够快速找到所需节点。下面我们就来看看如何实现这一功能。
一、准备工作
- 确保您的项目中已经引入了Element-UI组件库。如果没有引入，请先执行以下命令：
npm install element-plus --save
2.在项目中引入Tree组件和相关样式：
import { ElTree } from 'element-plus';
import 'element-plus/lib/theme-chalk/el-tree.css';export default {components: {ElTree}
}
二、实现可搜索树形结构
-
定义数据结构
首先，我们需要定义树形结构的数据。以下是一个简单的示例：
data() {return {treeData: [{id: 1,label: '一级节点1',children: [{id: 2,label: '二级节点1-1'},{id: 3,label: '二级节点1-2'}]},{id: 4,label: '一级节点2',children: [{id: 5,label: '二级节点2-1'}]}],filterText: ''};
}
2.渲染Tree组件
<el-inputplaceholder="输入关键字进行过滤"v-model="filterText">
</el-input><el-tree:data="treeData":props="defaultProps":filter-node-method="filterNode"ref="tree">
</el-tree>
3.实现搜索功能
通过监听输入框的值，调用Tree组件的filter方法实现搜索功能：
watch: {filterText(val) {this.$refs.tree.filter(val);}
},methods: {filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;}
}
