el-select 搜索高亮
时间: 2023-11-09 07:05:15 浏览: 162
可以通过设置 el-select 的 filterable 属性来开启搜索功能,同时可以通过设置 el-option 的 label 属性来实现搜索结果的高亮显示。具体实现可以参考以下代码:
```html
<el-select v-model="value" filterable>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
<span v-html="highlight(item.label)"></span>
</el-option>
</el-select>
```
```javascript
export default {
data() {
return {
value: '',
options: [
{ value: '1', label: '选项一' },
{ value: '2', label: '选项二' },
{ value: '3', label: '选项三' },
{ value: '4', label: '选项四' },
{ value: '5', label: '选项五' }
]
}
},
methods: {
highlight(label) {
const keyword = this.value
if (keyword) {
const reg = new RegExp(keyword, 'gi')
return label.replace(reg, '<span style="color:red">$&</span>')
} else {
return label
}
}
}
}
```
阅读全文