el-cascader 模糊查询
时间: 2023-09-24 20:05:35 浏览: 208
el-cascader 组件本身并不支持模糊查询,但是可以通过自定义 filter 方法来实现模糊匹配。具体实现步骤如下:
1. 在 el-cascader 组件中添加 filterable 属性,开启过滤功能:
```html
<el-cascader
filterable
:options="options"
:props="props"
@change="handleChange"
></el-cascader>
```
2. 自定义 filter 方法,在该方法中实现模糊匹配逻辑:
```javascript
filterMethod(value, option) {
// 从 option 中获取 label 字段
const label = option.label || '';
// 判断 label 是否包含搜索关键字
return label.toLowerCase().indexOf(value.toLowerCase()) > -1;
}
```
3. 将自定义的 filter 方法传递给 el-cascader 组件的 filter 方法:
```html
<el-cascader
filterable
:filter-method="filterMethod"
:options="options"
:props="props"
@change="handleChange"
></el-cascader>
```
这样,就可以在 el-cascader 组件中实现模糊匹配了。
阅读全文