elementui select选择器获取选中拿到当前对象
vue element-ui select选择器获取选中拿到当前对象
·
有时候因为需求等情况,我们需要拿到select选择器选择的整个对象,不光只拿到他的value
当使用element ui 的select选择器选择一个选项时,使用@change事件时只能得到一个Id,想要得到Id对应的对象用到filter进行过滤取到才可以。
方式一
<el-select v-model="dataForm.varietyIds" multiple placeholder="请选择"
@change="changeVarietyIds">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
changeVarietyIds(val) {
this.$forceUpdate()
let newList = []
val.map(v => {
const list = this.options.filter(item => {
return item.id === v
})
let obj = list[0]
newList.push(obj)
})
},
方式二
<el-select
value-key="id"
@change="searchSelect"
v-model="addRuleform.diseaseCode"
placeholder="请选择"
clearable>
<el-option
v-for="item in options"
key="item.id"
:label="item.name"
:value="item">
</el-option>
</el-select>
//change方法
searchSelect(val){
console.log("val",val)
},
这里的重点在于:
1.value-key绑定唯一标识,el-option的key值是不错的选择
2.@change方法不带参数
3.el-option的value绑定的是item对象
结果
已经拿到了预期的值,后续操作就看需求。
本文结束。
更多推荐
已为社区贡献29条内容
所有评论(0)