el-tree懒加载状态下实现搜索筛选(纯前端）

1.效果图 

（1）初始状态

 

（2）筛选后 

2.代码 

<template><div><el-inputplaceholder="输入关键字进行过滤"v-model="filterText"@input="searchValue"></el-input><el-treeclass="filter-tree"node-key="id":lazy="!openAll":load="loadNode":data="dataTree":props="defaultProps":default-expand-all="openAll"ref="tree"></el-tree></div>
</template>
<script>
export default {data() {return {openAll: false,filterText: '',dataTree: [{id: 1,label: 'xx公司',children: [{id: 3,label: '公关',children: [{id: 6,label: '张三'},{id: 7,label: '李四'}]},{id: 8,label: '公关领导'}]},{id: 2,label: 'yy娱乐',children: [{id: 4,label: '王五'},{id: 5,label: '赵六'}]}],defaultProps: {children: 'children',label: 'label',isLeaf: 'isLeaf',id: 'id'},dataTree1: []}},created() {this.dataTree1 = JSON.parse(JSON.stringify(this.dataTree))},methods: {searchValue() {this.$nextTick(() => {if (this.filterText &&this.filterText !== '' &&this.filterText !== null) {this.openAll = true//关闭懒加载this.$refs.tree.$data.store.lazy = false//全部展开this.$refs.tree.$data.store.defaultExpandAll = true//深拷贝let options = JSON.parse(JSON.stringify(this.dataTree))//清空this.$set(this, 'dataTree', [])//筛选要显示的节点this.searchTrees(options, this.filterText)//重新赋值this.$set(this, 'dataTree', options)} else {this.openAll = falsethis.$refs.tree.$data.store.lazy = truethis.$refs.tree.$data.store.defaultExpandAll = falsethis.$set(this, 'dataTree', this.dataTree1)}})},//循环树筛选要显示的节点searchTrees(arr, val) {let flag = falseif (arr && arr.length > 0) {for (let i = arr.length - 1; i >= 0; i--) {if (arr[i].children && arr[i].children.length > 0) {let tempflag = this.searchTrees(arr[i].children, val)if (tempflag == false) {arr.splice(i, 1)} else {flag = true}} else {if (arr[i].label.indexOf(val) === -1) {arr.splice(i, 1)} else {flag = true}}}return flag}},//懒加载(根据自己的数据来写)loadNode(node, resolve) {this.$nextTick(() => {if (this.openAll === false) {if (node.level === 0) {let topData = []this.dataTree.forEach(item => {topData.push({ label: item.label, id: item.id, isLeaf: false })})return resolve(topData)}//一级下拉if (node.level === 1) {let firstData = []this.dataTree.forEach(item => {if (item.id === node.data.id) {item.children.forEach(e => {firstData.push({label: e.label,id: e.id,isLeaf: e.children ? false : true})})}})return resolve(firstData)}// 二级下拉if (node.level === 2) {let secondData = []this.dataTree.forEach(item => {item.children.forEach(e => {if (e.id === node.data.id) {e.children.forEach(i => {secondData.push({label: i.label,id: i.id,isLeaf: true})})}})})return resolve(secondData)}}})}}
}
</script>