vue专题-select获取选中的label值

最新推荐文章于 2024-09-01 11:22:37 发布

原创最新推荐文章于 2024-09-01 11:22:37 发布 · 4.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

1 篇文章

订阅专栏

在Vue项目中，使用el-select组件并绑定value时，可通过监听点击事件获取选中标签(label)的值。通过在el-option上添加click.native事件，调用optionUnitClick方法并将item.name作为参数传递，从而将选中的label值赋给formData.unitDesc。

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

1、需求

在vue中使用select组件，通常绑定value值，但怎么同时获取选中lable的值。

2、实现代码

2.1. 页面展示代码：

<el-form-item label="单位"  prop="unitId" >
                    <el-select   class="w-[280px]" v-model="formData.unitId"  >
                        <el-option
                            v-for="item in optionsData.unitCate"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            @click.native="optionUnitClick(item.name)" />
                    </el-select>
                </el-form-item>

2.2. 获取选中的label值：

const optionUnitClick = async (data) => {
   formData.unitDesc = data;
}

3、代码解析

3.1. model绑定对象，值为选中的value。
3.2. for循环数据源集合。
3.3. click.native 对应的optionUnitClick方法将选中的label值作为参数使用。

4、页面展示

在这里插入图片描述