el-tree的filter-node-method
时间: 2023-07-10 11:32:55 浏览: 125
`el-tree` 是一个基于 Element UI 的树形组件,`filter-node-method` 是它提供的一个用于过滤节点的方法。
使用 `filter-node-method` 属性可以自定义过滤节点的规则。该属性接受一个函数,该函数的参数是树形节点对象,返回值为布尔类型,表示该节点是否需要显示。如果返回 true,则该节点及其子节点会被显示;如果返回 false,则该节点及其子节点会被隐藏。
下面是一个示例代码:
```html
<template>
<el-tree :data="data" :filter-node-method="filterNode"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1'
},
{
label: '三级 1-1-2'
}
]
},
{
label: '二级 1-2',
children: [
{
label: '三级 1-2-1'
},
{
label: '三级 1-2-2'
}
]
}
]
},
{
label: '一级 2',
children: [
{
label: '二级 2-1',
children: [
{
label: '三级 2-1-1'
},
{
label: '三级 2-1-2'
}
]
},
{
label: '二级 2-2',
children: [
{
label: '三级 2-2-1'
},
{
label: '三级 2-2-2'
}
]
}
]
}
]
}
},
methods: {
filterNode(value, data) {
if (!value) {
return true;
}
return data.label.indexOf(value) !== -1;
}
}
}
</script>
```
在上面的示例中,我们定义了一个 `filterNode` 方法,该方法接受两个参数,分别为搜索关键字和当前节点的数据对象。在方法中,我们判断如果搜索关键字为空,则返回 `true`,表示不进行过滤;否则,判断当前节点的 label 属性是否包含搜索关键字,如果包含则返回 `true`,否则返回 `false`。最终,根据返回值来决定该节点是否需要显示。