<u-form-item label="报工工序" label-width="auto" prop="workStation" required> <u-input :value="workOrder.warehouse" placeholder="请选择" disabled @click="showReportingProcess = true" input-align="right"/> <text class="iconfont icona-rightxiangyoujiantou" @click="showReportingProcess = true"></text> <u-picker mode="selector" v-model="showReportingProcess" :range="warehouseOptions" range-key="REPORTINGPROCESS" @confirm="reportingProcessComfirm"></u-picker> </u-form-item>

时间: 2023-11-11 13:48:55 浏览: 91

element-ui 关于获取select 的label值方法

5星 · 资源好评率100%

在Element UI框架中，`el-select`组件是一个常用的下拉选择器，用于展示一组可选项供用户选择。本文将详细讲解如何在Element UI中获取`el-select`组件选中的`label`值，以及如何同时获取`value`和`label`的值。 1. 获取`el-select`的`label`值：在Element UI中，`el-select`的`v-model`绑定的是选中项的`value`值。如果需要获取对应的`label`值，可以在`@change`事件中处理。以下是一个示例： ```html <el-form-item label="库位" prop="goodsLocationId"> <el-col :span="15"> <el-select v-model="scope.row.goodsLocationId" placeholder="货位地址" @change="changeLocationValue" > <el-option v-for="lo in locations" :label="lo.locationName" :value="lo.id" :key="lo.id" ></el-option> </el-select> </el-col> </el-form-item> ``` 在JavaScript部分，可以使用数组的`find()`方法来找到与`value`值匹配的选项对象，从而获取`label`值： ```javascript methods: { changeLocationValue(val) { const obj = this.locations.find((item) => item.id === val); this.wareHouseVO2.goodsLocationName = obj.locationName; }, } ``` 在这个例子中，`changeLocationValue`方法接收选中的`value`值作为参数，然后通过查找`locations`数组找到对应的对象，最后将`locationName`赋值给`wareHouseVO2.goodsLocationName`。 2. 同时获取`value`和`label`的值：在需要同时获取`value`和`label`的情况下，可以通过`@change`事件监听选中项的变化。以下是一个实例： ```html <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> ``` 在JavaScript中，`selectGet`方法可以接收选中的`value`值，并通过`find()`方法获取对应的对象： ```javascript methods: { selectGet(vId) { const obj = this.userList.find((item) => item.id === vId); console.log(obj.name); // 这里的name就是对应label的 }, } ``` 在这个例子中，`selectGet`方法会接收到选中项的`value`值（`vId`），然后通过`find()`方法在`userList`数据源中找到匹配的选项对象，最后可以访问到`obj.name`来获取对应的`label`值。总结，Element UI的`el-select`组件提供了方便的方式来获取选中项的`value`和`label`值。通过`v-model`绑定`value`值，然后在`@change`事件中查找对应的选项对象，可以轻松获取`label`值。同时，通过`@change`事件可以同时获取`value`和`label`，适用于需要同时处理这两种值的场景。这样的设计使得在Vue.js应用中处理用户选择变得更加灵活和高效。

这段代码是一个报工工序的表单项，包含了一个输入框和一个选择器。输入框用于显示选中的报工工序，点击输入框或右侧的箭头图标会显示报工工序的选择器。选择器是一个下拉菜单，用于选择报工工序。选择器的选项是通过warehouseOptions数组提供的，并且使用REPORTINGPROCESS作为显示文本。确认选择后会触发reportingProcessComfirm方法。

阅读全文

相关推荐

react-native-label:React将标签应用于React Native中的任何内容

form-urlencoded:以x-www-form-urlencoded字符串的形式返回对象

<u-form-item :label="$t('realName')" prop="realName" required> <u-input v-model="userInfo.realName" class="input" :placeholder="$t('pleaseEnter',[$t('realName')])" @input="onInput" :disabled="disInput"> </u-input> </u-form-item>中的required

vue3 <el-form-item <el-input 组合在一起的时候，去除掉<el-form-item的边框

<el-form-item>中的居右对齐

最新推荐

友价免签约支付接口插件最新版

探索AVL树算法：以Faculdade Senac Porto Alegre实践为例

管理建模和仿真的文件

【ggplot2绘图技巧】：R语言中的数据可视化艺术

HAL库怎样将ADC两个通道的电压结果输出到OLED上？

小学语文教学新工具：创新黑板设计解析

"互动学习：行动中的多样性与论文攻读经历"

【R语言并行计算秘籍】：倍增数据处理速度的高效策略

如何用C语言编程精确计算级数1 - 1/11 + 1/21 - 1/3! + ...（直到最后一项的绝对值小于1E-4）并求得e的近似值？

Minecraft服务器管理新插件ServerForms发布