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

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>

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:[]
    }
}

js部分

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