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 ''; // 若下拉框未选择,则返回空字符串
    },
  },
相关推荐
Mintopia14 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
ITKEY_16 分钟前
flutter日期选择国际化支持
开发语言·javascript·flutter
Mintopia16 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub19 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw22 分钟前
hippy的主要原理
前端
子兮曰25 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
2401_8534068825 分钟前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
蓝倾97628 分钟前
小红书获取用户作品列表API接口操作指南
java·服务器·前端·python·电商开放平台·开放api接口
小桥风满袖28 分钟前
极简三分钟ES6 - 数值的扩展
前端·javascript
北辰alk29 分钟前
React 组件间数据共享全方位指南:从 Props 到状态管理
前端