iview tree模糊搜索代码怎么写
时间: 2024-01-22 22:40:15 浏览: 78
vue输入框使用模糊搜索功能的实现代码
5星 · 资源好评率100%
对于iview tree模糊搜索,可以通过在tree组件中添加filter方法来实现。具体的代码实现可以参考下面的示例:
```
<template>
<div>
<i-input v-model="searchValue" placeholder="Search"></i-input>
<Tree :data="treeData" :filter-node-method="filterNode" :load-data="loadData"></Tree>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
title: 'Node1',
children: [
{
title: 'Child1'
},
{
title: 'Child2'
}
]
},
{
title: 'Node2',
children: [
{
title: 'Child3'
},
{
title: 'Child4'
}
]
}
],
searchValue: ''
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;
},
loadData(node, resolve) {
// your code to load data for lazy loading here
}
}
}
</script>
```
在上面的代码中,我们定义了一个iview的Tree组件,并且添加了一个搜索框。在Tree组件中,我们添加了filter-node-method方法来实现模糊搜索功能,具体实现方式为通过判断节点的title是否包含搜索值来返回true或false。
注意:代码中的loadData方法用于实现Tree的懒加载功能,这不是本问题的重点,不需要关注。
阅读全文