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 ''; // 若下拉框未选择,则返回空字符串
    },
  },
相关推荐
文心快码BaiduComate1 天前
新手该如何选择AI编程工具?文心快码Comate全方位体验
前端·后端·程序员
夫唯不争,故无尤也1 天前
Tomcat 内嵌启动时找不到 Web 应用的路径
java·前端·tomcat
lichong9511 天前
【Xcode】Macos p12 证书过期时间查看
前端·ide·macos·证书·xcode·大前端·大前端++
oh,huoyuyan1 天前
如何在火语言中指定启动 Chrome 特定用户配置文件
前端·javascript·chrome
前端大聪明20021 天前
single-spa原理解析
前端·javascript
一枚前端小能手1 天前
📦 从npm到yarn到pnpm的演进之路 - 包管理器实现原理深度解析
前端·javascript·npm
影i1 天前
CSS Transform 和父元素撑开问题
前端
@大迁世界1 天前
Promise.all 与 Promise.allSettled:一次取数的小差别,救了我的接口
开发语言·前端·javascript·ecmascript
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
DoraBigHead1 天前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js