element ui tree 搜索框
时间: 2023-11-11 20:07:28 浏览: 102
您可以使用 Element UI 的 Tree 组件提供的 filter-node-method 属性来实现搜索框功能。具体实现步骤如下:
1. 在 Tree 组件中添加一个输入框,用于输入搜索关键字。
2. 在 Tree 组件中添加 filter-node-method 属性,该属性接收一个函数作为参数,用于自定义节点过滤规则。
3. 在 filter-node-method 函数中,根据搜索关键字和节点的 label 属性进行匹配,返回 true 或 false,表示该节点是否需要显示。
以下是一个示例代码:
```html
<template>
<div>
<el-input v-model="keyword" placeholder="请输入关键字"></el-input>
<el-tree :data="data" :filter-node-method="filterNode"></el-tree>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '',
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1'
},
{
label: '二级 1-2'
}
]
},
{
label: '一级 2',
children: [
{
label: '二级 2-1'
},
{
label: '二级 2-2'
}
]
}
]
};
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
}
};
</script>
```
阅读全文