背景:我们在项目中,经常使用select下拉框,但是,下拉框一般绑定的都是value值,那我们如何获取下拉框选中的name值呢?
一、html片段–vue中获取值的方式
在select选择中,添加change事件,这样,在选择框内容变化时,就会该方法进行筛选了。
<el-form-item label="公司名称" :label-width="formLabelWidth" prop="companyName">
<el-select
v-model="form.companyName"
filterable
clearable
placeholder="请选择公司"
@change="changeCompanyName"
>
<el-option v-for="(item, index) in companyListAdd" :key="index" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
二、js中触发的方法
changeCompanyName(vId) { // 切换公司
if (vId) { //选中select中绑定的value值
let obj = {}
obj = this.companyListAdd.find((item) => { //companyListAdd就是上面遍历的数组的数据源
return item.id === vId; //筛选出匹配的数据
})
console.log(obj.name); //name就是对应的label值
}
},
参考博客: 如何在element-ui 中获取select 的label值 https://www.yisu.com/zixun/175679.html