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

<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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容