el-tree 搜索 节点过滤 包含下级 节点过滤加载对应的子节点

 

原文地址：https://blog.csdn.net/klousYG/article/details/111247188

<template>
    <div>
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree"> </el-tree>
    </div>
</template>

<script>
export default {
    data() {
        return {
            filterText: '',
            data: [{id: 1, label: '一级 1', children: [{id: 4, label: '二级 1-1', children: [{id: 9, label: '三级 1-1-1'}, {id: 10, label: '三级 1-1-2'}] }] }, {id: 2, label: '一级 2', children: [{id: 5, label: '二级 2-1'}, {id: 6, label: '二级 2-2'}] }, {id: 3, label: '一级 3', children: [{id: 7, label: '二级 3-1'}, {id: 8, label: '二级 3-2'}] }], defaultProps: {children: 'children', label: '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)
        },
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
}
</script>