vue中的select下拉框多选

效果图：

代码：

 <el-select 
 v-model="xxx" 
 multiple 
 value-key="id" 
 collapse-tags 
 @change="clk">
      <el-option 
      v-for="(item,index) in arrs" 
      :label="item.name" 
      :value="item"	
      :key="index">
      </el-option>
 </el-select>

   data() {
    return {
		xxx:'',
     	arrs:[
	        {id:0,name:'00',sex:'0',cont:'000'},
	        {id:1,name:'11',sex:'1',cont:'111'},
	        {id:2,name:'22',sex:'2',cont:'222'},
      	],
      }
     },
   	methods: {
	    clk(){
	      console.log(this.xxx);
	    },
    }

参数说明：
v-model=“xxx” ：绑定的属性
multiple ：控制多选
value-key=“id” :唯一标识，绑定值为对象类型时必填,id是你那个对象里面的某个属性
collapse-tags ：选了好几个选项，内容长度超出了就把后面的选项改成+1显示
@change=“clk ：点击事件
v-for=”(item,index) in arrs" ：循环的数组
:label=“item.name” ：选项
:value=“item” ：绑定的对象
:key=“index” 唯一值
如果想绑定对象里面的一个属性，：value那里就绑定item.xxx就可以了。
没了，结束了，是不是很简单呐
最后：如果此篇博文对您有帮助，还请动动小手点点关注点点赞呐~，谢谢 ~ ~