一、概述
因项目要求,需要增加一个模糊搜索,可以选择多个,数量不限制。
官方链接:https://element.eleme.cn/#/zh-CN/component/select#select-attributes
二、demo
test.vue
<template>
<div>
<el-select
v-model="value"
multiple
filterable
collapse-tags
clearable
placeholder="请输入关键词"
:loading="loading">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id">
<span>{{ item.name }}</span>
<span>{{ item.phone }}</span>
</el-option>
</el-select>
<div>
<div style="height: 200px"></div>
<div style="display: inline-block">当前选择的id是:</div>
<div v-for="(item,index) in value" :key="item.id" style="display: inline-block">
<span>{{item}}</span>
<span v-if="index!=value.length-1">,</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 选项列表
options: [
{
id:1,
name:'林志玲',
phone:'13435567541'
},
{
id:2,
name:'柳岩',
phone:'13435567542'
},
{
id:3,
name:'徐冬冬',
phone:'13435567543'
},
{
id:4,
name:'景甜',
phone:'13435567544'
},
{
id:5,
name:'韩雪',
phone:'13435567545'
},
],
value: [], // 选中的值
loading: false,
}
},
mounted() {
},
methods: {
}
}
</script>
效果如下:
注意,因为要求是可以选择多个,如果选择过多,输入框会被拉长,因此用数字表示,比如+1这种方式。
演示的代码,数据是写死的。实际项目中,是请求api获取的,稍微改动一下,即可使用。