el-tree懒加载状态下实现搜索筛选(纯前端）
1.效果图（1）初始状态
https://i-blog.csdnimg.cn/direct/c1e39d8ad30145e6af52454ba9733369.png
（2）筛选后
https://i-blog.csdnimg.cn/direct/8272b0f0194e483a9b14fb843fc1bde2.png
2.代码
<template>
<div>
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText"
@input="searchValue"
>
</el-input>
<el-tree
class="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 = false
this.$refs.tree.$data.store.lazy = true
this.$refs.tree.$data.store.defaultExpandAll = false
this.$set(this, 'dataTree', this.dataTree1)
}
})
},
//循环树筛选要显示的节点
searchTrees(arr, val) {
let flag = false
if (arr && arr.length > 0) {
for (let i = arr.length - 1; i >= 0; i--) {
if (arr.children && arr.children.length > 0) {
let tempflag = this.searchTrees(arr.children, val)
if (tempflag == false) {
arr.splice(i, 1)
} else {
flag = true
}
} else {
if (arr.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>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]