element-ui同时获取el-select选中对象中的多个属性值_el-select 下拉选获取额外属性值 csdn

 <el-form-item label="用户角色:" prop="userRoleId">
        <el-select v-model="form.userRoleId" placeholder="-请选择-" @change="pickRoleName">
          <el-option
            v-for="(item,index) in userRoleList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id">
          </el-option>
        </el-select>
</el-form-item>
1
2
3
4
5
6
7
8
9
10

之所以有这个需求是因为要用到item.roleName进行返显用户信息，而且item.id也要用于异步请求。但是，value只能绑定一个值，如上面的代码所示，:value="item.id""已经绑定了id，这样要用到roleName该怎么办呢？
百思不得起解，并且请教了同事也无果，最后在网上终于找到了解决方法！
在el-select这个节点绑定change事件， 通过选取到的id值去数据源里筛选出roleName.


methods: {
pickRoleName(vId){
let obj = {};
obj = this.$store.state.user.userRoleList.find((item)=>{//这里的userRoleList就是上面遍历的数据源
return item.id === vId;//筛选出匹配数据
});
this.form.roleName = obj.roleName;
}
}

然后，我们就可以愉快地从form里面获取roleName了。。。。