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

效果:

思路:

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

demo代码:

<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代码:

<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累的标志,所以需要在方法中过滤出显示的值

方法代码:

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 ''; // 若下拉框未选择，则返回空字符串
    },
  },