el-select同时获取label和value值

最新推荐文章于 2025-06-16 17:51:37 发布

xiongdaandxiaomi

最新推荐文章于 2025-06-16 17:51:37 发布

阅读量2.6w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： el-select 获取数据 vue element

本文链接：https://blog.youkuaiyun.com/xiongdaandxiaomi/article/details/85130968

Vue 专栏收录该内容

64 篇文章

订阅专栏

本文介绍了一个使用Vue框架实现的人员选择下拉框组件。该组件通过el-form-item和el-select元素构建，从chargingWorkNameList数据源中获取选项，并在选择人员后触发selectWorkName方法。此方法会根据选中的人员ID，从数据源中查找并返回完整的人员信息对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
html

 <el-form-item label="姓名" prop="oilPrice" >
    <el-select v-model="insertSheduleTab.chargingWorkName" clearable filterable placeholder="请选择人员" @change="selectWorkName">
        <el-option
        v-for="item in chargingWorkNameList"
        :key="item.chargingWorkId"
        :label="item.chargingWorkName"
        :value="item.chargingWorkId" >
        </el-option>
    </el-select>
</el-form-item>

method

  selectWorkName(id){
    console.log("select中对应value值",id)
     let selectedWorkName = {};
     selectedWorkName = this.chargingWorkNameList.find((item)=>{//这里的chargingWorkNameList就是上面遍历的数据源
         return item.chargingWorkId === id;
         //筛选出匹配数据，是对应数据的整个对象
     });
     }