element ui 动态渲染下拉框并实现多选的功能

最新推荐文章于 2024-07-09 14:10:47 发布

经年未远

最新推荐文章于 2024-07-09 14:10:47 发布

阅读量778

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_42628504/article/details/115064634

版权

<template>
     <div> 
	     <el-select v-model="value1" multiple placeholder="请选择" @remove-tag="aa"@change="getvalue">
	          <el-option v-for="item in options" :key="item.id"  :label="item.label" :value="item.id">{{item.label}}</el-option>
	    </el-select>
     </div>
</template>

<script>
export default{
     data(){
          return {
         options: [],
         value1: [],
         PersonType:""
          }
     },
     methods:{
         getvalue(){
             console.log(this.value1)
         },
         headSelect(){
             console.log(this.PersonType)
         }
     },
     created(){
    setTimeout(()=>{  //模拟数据
			         var arr =[{
			          id:1,
			          value: '选项1',
			          label: '香蕉'
			        }, { 
			             id:2,
			          value: '选项2',
			          label: '双皮奶'
			        }, {
			             id:3,
			          value: '选项3',
			          label: '蚵仔煎'
			        }, {
			             id:4,
			          value: '选项4',
			          label: '龙须面'
			        }, {
			             id:5,
			          value: '选项5',
			          label: '北京烤鸭'
			        }]
			       this.options = arr;
           },1000)
     }
}
</script>