elementUI el-select获取点击项的整个对象item
如何在Vue.js应用中使用el-select组件来创建下拉选择框。关键点包括v-model绑定的对象selectSubOptions,value-key属性设置为key,以及在change事件中获取选中项。示例代码展示了如何动态渲染选项并监听选中值的变化。
<el-select
v-model="selectSubOptions"
value-key="key"
@change="changeData"
>
<el-option
v-for="item in subDataOptions"
:key="item.key"
:label="item.name"
:value="item"
>
</el-option>
</el-select>
data(){
return {
selectSubOptions:{},//v-model绑定的对象
subDataOptions:[ //下拉框存储的数据
{
key: '选项1',
name: '黄金糕'
},{
key: '选项2',
name: '双皮奶'
}
]
}
},
methods: {
changeData(data){
console.log(data,888) //在这里就可以拿到绑定的整个对象
},
}
需要注意的点:
@change="changeData" //绑定的事件 不要加(),即不要写成@change="changeData()"
value-key="key" //一定要绑定这个value-key
:value="item" //在这里绑定对象
elementui 获取el-select,点击项的整个对象item
最新推荐文章于 2025-04-16 10:08:22 发布