下拉框如何获取到value跟code

最新推荐文章于 2023-11-24 12:22:09 发布

原创最新推荐文章于 2023-11-24 12:22:09 发布 · 787 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

46 篇文章

订阅专栏

40 篇文章

订阅专栏

本文介绍如何在前端开发中实现下拉框选择功能，通过遍历数组动态生成选项，并将选中项的code与value分别用于后端交互与界面展示。同时，根据下拉框的选择结果，动态控制后续输入框的显示与隐藏，实现界面的灵活响应。

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

遍历后端传来的 units 数组，[{value: ‘'区域一',code: '1'},{value: '区域二',code: '2'}]

<el-form-item label="活动区域" prop="unit">
    <el-select clearable v-model="unit" @change="getRoomByUnit">
        <el-option v-for="item in units" :key="item.code" :value="item.code" :label="item.value"></el-option>
    </el-select>
</el-form-item>

实际效果图：

此时 v-model 中拿到的 unit 是 code，会回传给后端。

但是如果要拿到value 区域一跟区域二要怎么做呢？

解决方法：获取 value，保存到 bulid 中去。

// 遍历选择到的code（this.unit）跟 [{value: ‘'区域一',code: '1'},{value: '区域二',code: '2'}] 中的一样的话，取其 value
let build = ''
this.units.find((item) => {
    if (item.code === this.unit) {
        build = item.value
    }
})

有code，有value，还要判断新条件description的下拉框决定是否显示以下输入框

          <el-col class="touble" :span="24" v-if="areas.filter(item=>item.value===form.region && item.description==='N').length>0">
            <el-form-item :label="$t('trouble-area1')" prop="trouble">
              <el-input type="textarea" v-model.trim="form.trouble" style="width:100%" resize="none"></el-input>
            </el-form-item>
          </el-col>