el-tree过滤搜索，包含下级

Francis-Yang

已于 2022-03-17 11:10:11 修改

阅读量1.9k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： #Vue 前端文章标签： vue.js javascript 前端

于 2022-03-17 11:09:12 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_57529171/article/details/123545377

#Vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

这篇博客详细介绍了如何在 Vue.js 中使用 Element UI 的 Tree 组件实现关键词过滤功能，并处理多树结构的交互。通过 `filterNode` 方法实现节点过滤，同时展示了如何在数据和组件之间绑定 `filterText` 以实现不同树结构的独立过滤。此外，还强调了在有多个树结构时，需要为每个树结构设置不同的 `v-model` 和 `ref`，并分别监听其 `filterText` 的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面主题代码

<template>
	<div class="app-container" style="padding: 10px;">
        <el-container>
    		<el-main>
    			<el-col :span="6">
                <el-row style="margin-top: 10px; margin-left: 10px; width: 95%;">
                  <el-input size="mini" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-tree
                           class="filter-tree" 
                           :data="treeList" 
                           node-key="id" 
                           accordion 
                           :default-expanded-keys="[1,2]" 
                           :filter-node-method="filterNode"
                   		   :expand-on-click-node="false" 
                           highlight-current 
                           :render-content="renderContent" 
                           ref="tree" @node-click="nodeClick">
                  </el-tree>
                </el-row>
              </el-col>
    		</el-main>
    	</el-container>
    </div>
</template>

需要注意的是，如果一个页面含有多个树结构，那么上述 v-model=“filterText” 和 ref="tree"需要区分，最简单的可以filterTextOne、filterTextTwo… ；treeOne、treeTwo…

Js部分代码

<script>
   export default {
        watch: {
          filterText(val) {
            this.$refs.tree.filter(val);
          }
        },
        data () {
            return {
                filterText: '',
                treeList: [{
                            id: '1',
                            label: '班级',
                            children: [{
                                    id: '2',
                                    label: '班级1',
                                    children: [{id: '3', label: '小红'}, {id: '4', label: '小明'}]
                                },{
                                    id: '5',
                                    label: '班级2',
                                    children: [{id: '6', label: '小亮'}, {id: '7', label: '小黑'}]
                             }]
                        }]
            }
        },
        methods: {
          // 树结构关键字查询
          filterNode(value, data, node) {
            if (!value) return true;
            let parentNode = node.parent, labels = [node.label], level = 1
            while (level < node.level) {
                labels = [...labels, parentNode.label]
                parentNode = parentNode.parent
                level++
            }
            return labels.some(label => label.indexOf(value) !== -1)
          },
        }
   	}
</script>

Js部分需要注意的是，watch: {}中，如有多个树结构，则需要写多个，特别注意其中 filterText 和 tree(ref=tree)不同：

watch: {
	filterTextOne(val) {
		this.$refs.treeOne.filter(val);
	},
    filterTextTwo(val) {
    	this.$refs.treeTwo.filter(val);
    }
}

有多个树结构时，data () { return{} }中，也需要声明多个filterText：

data () {
	return {
		filterTextOne: '',
		filterTextTwo: ''
	}
}

效果展示：

在这里插入图片描述