我使用这个插件https://www.npmjs.com/package/vue-select从列表中选择多个值。
让我们假设以下内容:
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
options: []
},
methods: {
onSearch(search, loading) {
if(search.length) {
loading(true);
this.search(loading, search, this);
}
},
search: _.debounce((loading, search, vm) => {
fetch(
`https://api.github.com/search/repositories?q=${escape(search)}`
).then(res => {
res.json().then(json => (vm.options = json.items));
loading(false);
});
}, 350)
}
});
img {
height: auto;
max-width: 2.5rem;
margin-right: 1rem;
}
.d-center {
display: flex;
align-items: center;
}
.selected img {
width: auto;
max-height: 23px;
margin-right: 0.5rem;
}
.v-select .dropdown li {
border-bottom: 1px solid rgba(112, 128, 144, 0.1);
}
.v-select .dropdown li:last-child {
border-bottom: none;
}
.v-select .dropdown li a {
padding: 10px 20px;
width: 100%;
font-size: 1.25em;
color: #3c3c3c;
}
.v-select .dropdown-menu .active > a {
color: #fff;
}
<link href="https://unpkg.com/vue-select/dist/vue-select.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/lodash@latest/lodash.min.js"></script>
<script src="https://unpkg.com/vue-select@3.11.2/dist/vue-select.js"></script>
<div id="app">
<h1>Vue Select - Ajax</h1>
<v-select label="name" multiple :filterable="false" :options="options" @search="onSearch">
<template slot="no-options">
type to search GitHub repositories..
</template>
<template slot="option" slot-scope="option">
<div class="d-center">
<img :src='option.owner.avatar_url'/>
{{ option.full_name }}
</div>
</template>
<template slot="selected-option" slot-scope="option">
<div class="selected d-center">
<img :src='option.owner.avatar_url'/>
{{ option.full_name }}
</div>
</template>
</v-select>
</div>
如果我搜索例如:“javascript”并选择前四个,我有这个
但我想要这样的东西:
或者像这样
那可能吗?我知道还有其他插件可以做到这一点(例如:vue multiselect),但我需要用这个插件来实现它,因为其他插件缺少我需要的一些其他功能