如何通过vue封装tree组件实现搜索功能
本篇文章和大家了解一下如何通过vue封装tree组件实现搜索功能。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
我使用的是 vue2 + antd， 那么 antd 的 tree 组件中没有给我们封装搜索，其官网提供的搜索也不是封装好的，而且限制比较大，因为我的树形进来要默认展开，官方的代码是进行了响应式，就不能上来就全部展开了
可以看一下，官方的代码是这样的，灵活性很低的还是
那我们自己来根据这个思路，进行一下改装， 首先看一下最终呈现是啥样的：
如上图，可以看到我们刚进来的时候，就默认是全部展开的，然后上面有一个搜索框，这里我们可以自己定义交互，可以绑定成搜索的回车事件，也可以绑定change事件, 思路就是当我们搜索以后，重置我们下面 tree 树形的 输入数据 data，这样就简单的实现了搜索以后显示指定的树形。
这里面复杂的地方在于那个递归，因为递归的时候我们需要得到 1、 一个新数据 2、搜索子级的时候也要全部的父级 3、 搜索父级的时候也要全部的子级，下面来看看代码
首先是vue模板中的代码
<a-input-search placeholder="搜索" @change="searchOrg" :allowClear="true" v-model="searchPerson" ></a-input-search> <a-tree class="tree_box" ref="tree" @select="onSelect" :tree-data="currentTree" default-expand-all />
从这里可以看出来，我们封装的要比官方的轻量很多，ref 和 这里的逻辑是没有涉及的，可以删掉。
接下来看我们的业务代码
<script>
export default {
props: {
treeList: {
type: Array,
default: () => []
},
},
data() {
return {
searchPerson: '',
currentTree: this.treeList,
}
},
methods: {
searchTree(tree, keyword, includeChildren = false) {
const newTree = []
for (let i = 0; i < tree.length; i++) {
const node = tree[i]
if (node.title.includes(keyword)) {
// 如果当前节点符合条件，则将其复制到新的树形结构中，并根据 includeChildren 参数决定是否将其所有子节点也复制到新的树形结构中
newTree.push({ ...node, children: includeChildren ? this.searchTree(node.children || [], '', true) : [] })
} else if (node.children) {
// 如果当前节点不符合条件且存在子节点，则递归遍历子节点，以继续搜索
const result = this.searchTree(node.children, keyword, true)
if (result.length > 0) {
// 如果子节点中存在符合条件的节点，则将其复制到新的树形结构中
newTree.push({ ...node, children: result })
}
}
}
return newTree
},
searchOrg() {
this.currentTree = this.searchTree(this.treeList, this.searchPerson, true)
},
async onSelect(selectedKeys, info) {
},
}
}
</script>这里我的 tree-data 使用的是父组件传入的 props ， 因为我们后期要更改数据，所以不能直接使用，要接一下， 在用户输入的时候，重置数据即可， 主要依赖于 searchTree 这个递归的方法，第三个参数是一个布尔值， 默认是 false ，当搜索到符合条件的父级节点时，除了将该节点复制到新的树形结构中，还会根据 includeChildren 参数决定是否将其所有子节点也复制到新的树形结构中。如果 includeChildren 参数为 true，则递归遍历其所有子节点，并将其复制到新的树形结构中。如果 includeChildren 参数为 false，则不会递归遍历其子节点，只会将符合条件的父节点复制到新的树形结构中。
最终在我们搜索的时候可以呈现以下效果：
当我们想从新获取全部的时候，只需要情况输入框即可，这样我们的递归方法会把完整的树形返回给我们~
vue是什么
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
以上就是如何通过vue封装tree组件实现搜索功能的简略介绍，当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多，欢迎关注蜗牛博客行业资讯频道哦！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论