下拉框多选

效果图：

 <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>
<script>
           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);
	    },
    }
</script>

参数说明：

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就可以了。

多选数据回显

效果图：

思路：v-model绑定的是一个数组，里面包含你所选择的值，拿到的是一个串数字，需要转为字符串，再转按逗号分隔成数组进行赋值。

 <p class="adzjgs"><span>护士姓名：</span>
    <el-select
      multiple
      v-model="mnurseId"
      :multiple-limit=3>
      <el-option :value="item.id" v-for="item in cnurseIdArr" :key="item.id" :label="item.name"></el-option>
    </el-select>
  </p>

rows(row){
	this.mnurseId=row.nurseIds.toString().split(',');`
}

没了，结束了，是不是很简单呐，如有问题，欢迎留言。
如果此篇博文对您有帮助，还请动动小手点点关注 点点赞 收藏 ?留言呐~，谢谢 ~ ~