4-7-vue框架-第三方ui组件elementui-el-select组件change事件获取label的值
Element的el-select组件change事件获取label的值
在如下el-select组件的代码中,要想在change事件时获取label的值。
<el-select
v-model="ruleForm.usualReviews"
:readonly="true"
class="oms-select"
placeholder="请选择常用意见"
@change="selectChanged"
>
<el-option v-for="item in list"
:key="item"
:value="item.opinionId"
:label="item.content"
></el-option>
</el-select>
方法1:修改:value的值
我们可以修改:value的值为"{value:item.opinionId,label:item.content}"。
<el-select
v-model="ruleForm.usualReviews"
:readonly="true"
class="oms-select"
placeholder="请选择常用意见"
@change="selectChanged"
>
<el-option v-for="item in list"
:key="item"
:value="{value:item.opinionId,label:item.content}"
:label="item.content"
></el-option>
</el-select>
再选择下拉框,触发selectChanged函数,则可以获取到label的值。
selectChanged(params){
const { value, label } = params
this.ruleForm.processReview = label
}
方法2:遍历
Element UI - el-select 同时获取 value 和 label 的值
<el-form-item v-if="isMD" label="业务员名称">
<el-select v-model="addBM.storeManagerName" @change="selectGet" filterable style="display:block;" placeholder="请选择门店业务员名称">
<el-option
v-for="item in userList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
// 下拉框选中事件
selectGet(vId){ // 这个vId也就是value值
console.log(ha);
let obj = {};
obj = this.userList.find((item)=>{ // 这里的userList就是上面遍历的数据源
return item.id === vId; // 筛选出匹配数据
});
console.log(obj.id);
console.log(obj.name); // 这边的name就是对应label
}
技术改变命运
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理