iview通过输入框过滤树节点

element-ui和iview中都有树形结构，可以用来展示多层级的数据，比如目录，上下级组等等：

可数据很多或者树有很多层的时候，我们要想找到某一级就比较麻烦了，这点element-ui有现成的搜索过滤组件，但iview里面则没有这种属性方法，此时就只能我们自己去写方法来实现了。
以下是我尝试后的方法：

<template>
    <div>
        <Input placeholder="输入关键字进行过滤" v-model="filterText"/>
        <Tree :data="data" show-checkbox></Tree>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                filterText:null,
                flag:0,
                data:[],
                data2:  [{
                    expand: true,
                    title: '一级 1',
                    children: [{
                        expand: true,
                        title: '二级 1-1',
                        children: [
                            {
                            expand: true,
                            title: '三级 1-1-2',
                            children: [
                                {
                                expand: true,
                                title: '四级 1-1-3-4'
                                }]
                            }, 
                            {
                            expand: true,
                            title: '三级 1-1-2'
                            }
                        ]
                    }]
                    }, {
                    expand: true,
                    title: '一级 2',
                    children: [{
                        expand: true,
                        title: '二级 2-1'
                    }, {
                        expand: true,
                        title: '二级 2-2'
                    }]
                    }, {
                    expand: true,
                    title: '一级 3',
                    children: [{
                        expand: true,
                        title: '二级 3-1'
                    }, {
                        expand: true,
                        title: '二级 3-2'
                    }]
                    }],
            }
        },
        methods: {
            //过滤树节点
            filterNode(val,List){
                //过滤出满足条件的数组
                let List1=List.filter(item=>{
                    //如果该元素有children，则优先处理children的
                    if(item.children){
                        //过滤children里面满足条件的
                        item.children=this.filterNode(val,item.children)
                        //如果children里面没有满足条件的，则进入，否则返回true
                        if(!item.children.some(item1=>item1.title.indexOf(val) !== -1)){
                            //判断children里面是否还有一层children,如果有则对内层children继续调用函数判断，否则返回title中含有关键字的元素
                            if(item.children.some(item1=>item1.children)){
                                item.children.forEach(item2 => {
                                    item2.children&&this.filterNode(val,item2.children)
                                });
                            }else{
                                return item.title.indexOf(val) > -1
                            }
                        }   
                        return true
                    }
                    //返回title中含有关键字的元素
                    return item.title.indexOf(val) > -1
                })
                return List1
            }
        },
        mounted(){
            this.data=this.data2
        },
        watch: {
            filterText(val) {
                let arr=JSON.parse(JSON.stringify(this.data2))
                this.data=this.filterNode(val,arr)
            }
        },
    }
</script>

效果图（依次为什么都没输-输入1-输入2-输入3-输入4）：





即效果实现！