element-ui select多选情况下获取label和value

Vue多选下拉框数据处理

最新推荐文章于 2024-12-23 10:00:00 发布

转载最新推荐文章于 2024-12-23 10:00:00 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.shuzhiduo.com/A/kPzOExv15x/

文章标签：

#vue.js #elementui #javascript

工作中的问题同时被 2 个专栏收录

16 篇文章

订阅专栏

vue

10 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的多选下拉框组件案例，详细展示了如何通过v-model双向绑定来选择和获取选项，并实现了将选中项的ID与名称分别收集的功能。

HTML部分

               <el-select
                  v-model="value"
                  multiple
                  collapse-tags
                  ref="select"
                  @change="changeLocationValue" //将用到此方法
                  style="margin-left: 20px;"
                  placeholder="请选择角色">
                  <el-option
                    v-for="item in options" //options 数据源
                    :key="item.id"
                    :label="item.roleName" //我的label是 roleName
                    :value="item.id"> //我的value 是 id
                  </el-option>
                </el-select>

js部分

data(){
    return {
        options:[
           {id:1,roleName:'dafe'},
           {id:2,roleName:'gged'},
           {id:3,roleName:'dafgddvde'},
           {id:4,roleName:'hjrtb'},
           {id:5,roleName:'fgdcbd'}
         ],
        departmentIds:[],
        departmentNames:[]
    }
}

   changeLocationValue(val){
      this.departmentIds = [] //初始化数据
      this.departmentNames = [] //初始化数据
      for(let i=0;i<=val.length-1;i++){
        this.options.find((item)=>{ //这里的options就是数据源
          if(item.id == val[i]){
            this.departmentIds.push(item.id) //这里的value我改成了id
            this.departmentNames.push(item.roleName) //这里的label我改成了roleName
          }
        });
      }
      console.log(this.departmentIds)
      console.log(this.departmentNames)
    },