Elementui 拿到Select Option 中的值和内容

最新推荐文章于 2024-11-22 11:11:04 发布

原创最新推荐文章于 2024-11-22 11:11:04 发布 · 3.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在Vue.js中如何为el-select组件绑定change事件，通过方法classinfoChange获取选中项的id和name。通过v-model绑定form.cid，利用find方法筛选匹配的数据，从而更新form.classinfoName。示例代码详细展示了实现过程。

话不多说直接上代码

代码1

给需要拿到值的 select 下拉列表绑定一个`@change`事件，并指定一个方法

<el-form-item label="" prop="" >
<el-select clearable filterable v-model="form.cid" placeholder="请选择对应的班级名称" @change="classinfoChange($event)" >
<el-option v-for="c in classinfo" :key="c.id" :label="c.name" :value="c.id">
</el-option>
</el-select>
</el-form-item>

方法

代码2 classinfoChange(val){
let obj = {};
obj = this.classinfo.find((item) => {
return item.id === val; //筛选出匹配数据，这里的value是你遍历数组每一项的value，如果没有对后台返回的数据做处理，一般为id
});
this.form.classinfoName = obj.name;
}