ElementUI 多选+远程搜索
作者:互联网
一、概述
因项目要求,需要增加一个模糊搜索,可以选择多个,数量不限制。
官方链接: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>View Code
效果如下:
注意,因为要求是可以选择多个,如果选择过多,输入框会被拉长,因此用数字表示,比如+1这种方式。
演示的代码,数据是写死的。实际项目中,是请求api获取的,稍微改动一下,即可使用。
标签:多选,ElementUI,id,选择,phone,item,远程,select,name 来源: https://www.cnblogs.com/xiao987334176/p/15753616.html