vue2项目 实现上边两个下拉框,下边一个输入框 输入框内显示的值为[“第一个下拉框选中值“ -- “第二个下拉框选中的值“]

效果:

思路:

采用vue中 [computed:] 派生属性的方式实现联动效果,上边两个切换时,下边的跟随变动

demo代码:

javascript 复制代码
<template>
  <div>
    <!-- 第一个下拉框 -->
    <select v-model="firstValue">
      <option v-for="option in options" :key="option" :value="option">
        {{ option }}
      </option>
    </select>

    <!-- 第二个下拉框 -->
    <select v-model="secondValue">
      <option v-for="option in options" :key="option" :value="option">
        {{ option }}
      </option>
    </select>

    <!-- 输入框,显示结果 -->
    <input type="text" :value="computedValue" readonly />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstValue: null,
      secondValue: null,
      options: [10, 20, 30, 40, 50], // 假设下拉框选项为数字
    };
  },
  computed: {
    computedValue() {
      // 计算输入框中的值,避免出现 NaN 或空值
      if (this.firstValue !== null && this.secondValue !== null) {
        return this.firstValue - this.secondValue;
      }
      return ''; // 若下拉框未选择,则返回空字符串
    },
  },
};
</script>

结合实际应用还可以升级提炼

HTML代码:

javascript 复制代码
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="第一个下拉框" prop="attributeId">
          <el-select v-model="form.attributeId" clearable filterable style="width:100%" :disabled="updateStatus == 1" placeholder="请选择">
            <el-option
              v-for="item in bizAttributesList"
              :key="item.id"
              :label="item.attributeName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>   
        <el-form-item label="第二个下拉框" prop="relAttributeId">
          <el-select v-model="form.relAttributeId" clearable filterable style="width:100%" :disabled="updateStatus == 1" placeholder="请选择">
            <el-option
              v-for="item in bizAttributesList"
              :key="item.id"
              :label="item.attributeName"
              :value="item.id"
            />
          </el-select>
        </el-form-item> 
         <el-form-item label="输入框" prop="bizRelDesc">
          <el-input v-model="form.bizRelDesc" :value="computedValue" disabled/>
        </el-form-item>
</el-form>

结合实际情况基本前两种,获取到的是id累的标志,所以需要在方法中过滤出显示的值

方法代码:

javascript 复制代码
computed: {
    computedValue() {
       let attributeIdValue = ''
      let relAttributeIdValue = ''
      // 计算输入框中的值,避免出现 NaN 或空值
      if (this.form.attributeId && this.form.relAttributeId) {//两个都有值
      this.bizAttributesList.forEach(item=>{
        if(item.id === this.form.attributeId){
          attributeIdValue = item.attributeName
        }
        if(item.id === this.form.relAttributeId){
          relAttributeIdValue = item.attributeName
        }
      })
        return this.form.bizRelDesc = `${attributeIdValue}-${relAttributeIdValue}`
      }else if(this.form.attributeId && !this.form.relAttributeId){//第一个有值 第二个没有
      this.bizAttributesList.forEach(item=>{
        if(item.id === this.form.attributeId){
          attributeIdValue = item.attributeName
        }
      })
        return this.form.bizRelDesc = `${attributeIdValue}-`
      }else if(!this.form.attributeId && this.form.relAttributeId){//第二个有值 第一个没有
      this.bizAttributesList.forEach(item=>{
        if(item.id === this.form.relAttributeId){
          relAttributeIdValue = item.attributeName
        }
      })
        return this.form.bizRelDesc = `-${relAttributeIdValue}`
      }
      return ''; // 若下拉框未选择,则返回空字符串
    },
  },
相关推荐
黄智勇13 分钟前
xlsx-handlebars 一个用于处理 XLSX 文件 Handlebars 模板的 Rust 库,支持多平台使
前端
brzhang1 小时前
为什么 OpenAI 不让 LLM 生成 UI?深度解析 OpenAI Apps SDK 背后的新一代交互范式
前端·后端·架构
brzhang2 小时前
OpenAI Apps SDK ,一个好的 App,不是让用户知道它该怎么用,而是让用户自然地知道自己在做什么。
前端·后端·架构
爱看书的小沐2 小时前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
程序员王天2 小时前
【开发AGIC】Vue3+NestJS+DeepSeek AI作业批改系统(已开源)
vue.js·ai编程·nestjs
井柏然3 小时前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化
昔冰_G3 小时前
Vue内置组件KeepAlive——缓存组件实例
vue.js·缓存·vue3·vue2·keep-alive·vue组件缓存·vue内置组件
IT_陈寒3 小时前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
aklry3 小时前
elpis之动态组件机制
javascript·vue.js·架构
井柏然3 小时前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化