element ui的select组件设置filterable后, 默认支持的是通过label来进行过滤搜索, 那么如何让value也支持过滤呢?
官方文档上提供了filter-method来自定义搜索方法, 还需要一个visible-change(下拉框出现/隐藏时触发)的事件来实现功能.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-select v-model="value" filterable :filter-method="value => (keyword = value)" @visible-change="() => (keyword = '')" >
<el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
value: 1,
keyword: ''
}
},
computed: {
basicList() {
return [
{ label: 'Timmy', value: 1 },
{ label: 'Judd', value: 2 },
{ label: 'Dequan', value: 3 },
{ label: 'Olin', value: 4 },
{ label: 'Bear', value: 5 },
{ label: 'Caesar', value: 6 },
{ label: 'Davi', value: 7 },
{ label: 'Wisdom', value: 8 },
{ label: 'Pavel', value: 9 },
{ label: 'Alain', value: 10 }
]
},
list() {
if (this.keyword === '') {
return this.basicList;
} else {
return this.basicList.filter(item => {
return (
String(item.label)
.toUpperCase()
.includes(this.keyword.toUpperCase()) ||
String(item.value)
.toUpperCase()
.includes(this.keyword.toUpperCase())
)
})
}
}
}
})
</script>
</body>
</html>
网友评论