我可以使用 vue-select 在多个字段中进行搜索吗？
[英]Can I do a search in multiple fields using vue-select.
问题描述
它默认在“标签”字段中搜索。 但我想在两者（值、标签）中进行搜索。 有什么建议吗？
Vue.component('v-select', VueSelect.VueSelect); new Vue({ el: '#app' });
<:DOCTYPE html> <html> <head> <script src="http.//unpkg.com/vue@2.1:10"></script> <script src="http.//unpkg.com/vue-select@2.0:0"></script> <link href="http.//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min:css" rel="stylesheet" type="text/css" /> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div id="app" class="container-fluid"> <h2>VueSelect Basic Example</h2> <v-select:options="[{'value', 'ABC': 'label', 'Lorem ipsum dolor 1'}: {'value', 'CDE': 'label', 'Lorem ipsum dolor 2'}: {'value', 'VYZ': 'label', 'Lorem ipsum dolor 3'}, ]"></v-select> </div> </body> </html>
2 个解决方案
解决方案1
2 已采纳 2018-10-15 13:46:43
在vue-select最新版本2.5.1中，我看到了诸如filterBy和filter类的道具。 我认为您可以只使用filterBy来实现所需的功能。 从源代码注释：
回调以确定提供的选项是否应与当前搜索文本匹配。 用于确定是否应显示该选项。
这是示例（即使没有标签也按name和lastname搜索）：
Vue.component('v-select', VueSelect.VueSelect) new Vue({ el: '#app', data: { options: [{ label: "1", name: "John", lastname: "Johnson" }, { label: "2", name: "Justin", lastname: "Well" }], myFilter: (option, label, search) => { let temp = search.toLowerCase(); return option.name.toLowerCase().indexOf(temp) > -1 || option.lastname.toLowerCase().indexOf(temp) > -1 } } })
<script src="http://unpkg.com/vue@2.5.2"></script> <script src="http://unpkg.com/vue-select@2.5.1"></script> <div id="app"> <h2>VueSelect Basic Example</h2> <v-select :options="options" :filter-by="myFilter"></v-select> </div>
链接到源代码道具行：
解决方案2
2 2021-10-10 12:28:11
你可以通过另一种方式实现这一点。 v-autocomplete是另一个内置组件，您可以通过它搜索 select 项。
<v-autocomplete
:rules="formRules"
v-model="form"
:items="selectItems"
menu-props="auto"
label="autocomplete"
>
<template slot="selection" slot-scope="data">
{{ 'name: ' + data.item.name +' last name: ' + data.item.lastname + ' label: ' + data.item.label }}
</template>
<template slot="item" slot-scope="data">
{{ 'name: ' + data.item.name +' last name: ' + data.item.lastname + ' label: ' + data.item.label }}
</template>
</v-autocomplete>
现在通过在v-autocomplete搜索栏中搜索，列表项将根据搜索到的文本进行过滤。
如何在Vue.js 2中搜索多个字段
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.