我可以使用vue-select在多个字段中进行搜索。
我可以使用vue-select在多个字段中进行搜索。
提问于 2018-10-15 13:02:29
它在"label“字段中搜索默认值。但我想在两者中进行搜索(价值，标签)。有什么建议吗？
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
Stack Overflow用户
回答已采纳
发布于 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>
指向源代码道具行的链接：
Stack Overflow用户
发布于 2021-10-10 12:28:11
你可以用另一种方法来实现这一点。V-自动完成是另一个内置组件，您可以通过它搜索所选的项.
<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-自动完成搜索栏中搜索，列表项将根据搜索到的文本进行筛选。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52817437
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号