vue下拉选择select option多选取值问题

辛凡

于 2020-03-27 14:04:09 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： vue javascript js

本文链接：https://blog.csdn.net/lojieo/article/details/105139551

VUE 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何使用Vue.js实现一个多选下拉框组件，包括数据绑定、事件监听以及动态生成选项等核心功能。通过实例展示了如何设置默认选中项、过滤和创建新选项，并提供了代码示例以便于理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <el-select v-model="rolePost" multiple  filterable allow-create default-first-option placeholder="请选择" @change="change">
     <el-option
      v-for="item in rolePosts"
      :value="item.id"
      :label="item.postName"
      :key="item.id" >

      </el-option>
</el-select>

 var vm = new Vue({
            el: "#app",
            data: {
               rolePosts:[
                    {id:6, postName: "名称1"},
                    {id:7, postName: "名称2"},
                    {id:8, postName: "名称3"}
               ],
               rolePost:[],
               id:0  
            },
            methods: {
                change:function(){
                    console.log(this.rolePost)
                },
            }

        })

粗陋代码，望您指导