业务开发使用了适用性较广的基础多选，用 Tag 展示已选项,为el-select设置multiple属性即可启用多选,设置filterable可搜索选择
<el-select
v-model="value"
multiple
filterable
popper-class="select-rule"
no-match-text="暂无信息"
no-data-text="暂无信息"
:default-first-option=true
:reserve-keyword=true
@change="selectProvider"
placeholder="请选择>
<el-option
v-for="item in options"
:key="item.value"
:label="item.text"
:value="item.value">
</el-option>
</el-select>
data() {
return {
options: [{
value: 'HTML',
text: 'HTML'
}, {
value: 'CSS',
text: 'CSS'
}, {
value: 'JavaScript',
text: 'JavaScript'
},{
value: '选项1',
text: '黄金糕'
}, {
value: '选项2',
text: '双皮奶'
}, {
value: '选项3',
text: '蚵仔煎'
}, {
value: '选项4',
text: '龙须面'
}, {
value: '选项5',
text: '北京烤鸭'
},],
value: [],
}
},
-
最终完成效果
最后还需要提醒大家一点，本篇文章中的例子仅供参考学习，切误将本篇文章中的代码直接使用在正式项目当中。希望以上代码对大家有所帮助。
