上一篇: 使用el-select和el-tree相结合实现下拉效果
一、实现的效果图
可能有些需求要求能够进行模糊查询功能,所以将上一篇使用el-select和el-tree相结合实现下拉效果文章进行了优化。
二、主要代码
1.template部分
代码如下(示例):
1.filterable: 添加filterable属性即可启用搜索功能。默认情况下,Select 会找出所有label属性包含输入值的选项。
2.filter-method: 但如果我们需要使用其他搜索逻辑,需要用到filter-method方法。
3.filter-node-method: 在需要对节点进行过滤时,调用 Tree 实例的filter方法,参数为关键字。需要注意的是,此时需要设置filter-node-method,值为过滤函数。(官方文档说明)
2.方法部分
代码如下(示例):
typeFilter(value) {
this.$refs.tree.filter(value)
},
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
}
欢迎评论留言,一起学习交流!