element-ui select多選狀況下獲取label和value

直接上代碼

               <el-select
                  v-model="value"
                  multiple
                  collapse-tags
                  ref="select"
                  @change="changeLocationValue"
                  style="margin-left: 20px;"
                  placeholder="請選擇角色">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.roleName"
                    :value="item.id">
                  </el-option>
                </el-select>

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)
    },