多下拉框（el-select）,输入框（el-input）,多按钮（el-button）相互绑定

1、效果图

效果图说明：篮子类型选择数量篮子时候，交易方向选择买入，卖出，调仓，清仓 则input框都是篮子数量，但是下侧按钮会根据选择交易方向发生自适应变化；但是篮子类型若是权重篮子时候，交易方向一旦变化后面input输入框和下侧按钮都要变化；具体情况如效果图

2、源码实现

<template>
  <div>
    <el-form :model="form">
      <!-- 篮子类型下拉框 -->
      <el-form-item label="篮子类型:" prop="basketType">
        <el-select
          v-model="form.basketType"
          placeholder="请选择篮子类型"
          @change="basketChange"
        >
          <el-option
            v-for="item in this.form.basketTypeDict"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>

      <!-- 交易方向下拉框 -->
      <el-form-item label="交易方向" prop="selectBsFlag">
        <el-select
          v-model="form.selectBsFlag"
          placeholder="请选择交易方向"
          @change="selectBsFlagChange"
        >
          <el-option
            v-for="dict in bsFlagOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>

      <!-- input输入框情况 -->
      <el-form-item label="篮子数量:" v-if="verifyInputNumBasketN1 === 'n1'">
        <el-input v-model="form.basketNum"></el-input>
      </el-form-item>
      <el-form-item
        label="买入金额:"
        v-if="
          verifyInputNumBasketN1 === 'n2' && verifyInputWeightBasketN2 === 'NB'
        "
      >
        <el-input v-model="form.buyAmount"></el-input>
      </el-form-item>
      <el-form-item
        label="卖出金额:"
        v-if="
          verifyInputNumBasketN1 === 'n2' && verifyInputWeightBasketN2 === 'NS'
        "
      >
        <el-input v-model="form.soldAmount"></el-input>
      </el-form-item>
      <el-form-item
        label="目标市值:"
        v-if="
          verifyInputNumBasketN1 === 'n2' && verifyInputWeightBasketN2 === 'NA'
        "
      >
        <el-input v-model="form.targetMarketValue"></el-input>
      </el-form-item>
      <el-form-item
        label="清仓比例:"
        v-if="
          verifyInputNumBasketN1 === 'n2' && verifyInputWeightBasketN2 === 'NC'
        "
      >
        <el-input v-model="form.clearRate"></el-input>
      </el-form-item>

      <!-- 按钮情况 -->
      <el-form-item v-if="bsFlagNum === '3B'">
        <el-button type="primary" @click="buyBasket">篮子买入</el-button>
      </el-form-item>
      <el-form-item v-if="bsFlagNum === '3S'">
        <el-button type="primary" @click="soldBasket">篮子卖出</el-button>
      </el-form-item>
      <el-form-item v-if="bsFlagNum === '3A'">
        <el-button type="primary" @click="adjustHouse">篮子调仓</el-button>
      </el-form-item>
      <el-form-item v-if="bsFlagNum === '3C'">
        <el-button type="primary" @click="removeHouse">篮子清仓</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // form表单
      form: {
        // 篮子数量
        basketNum: 0,

        // 买入金额
        buyAmount: 0,

        // 卖出金额
        soldAmount: 0,

        // 目标市值
        targetMarketValue: 0,

        // 清仓比例
        clearRate: 0,

        // 篮子类型字典
        basketTypeDict: [
          { dictValue: 0, dictLabel: "数量篮子" },
          { dictValue: 1, dictLabel: "权重篮子" },
        ],
      },

      // 临时存储判断input框 数量篮子
      verifyInputNumBasket: ["n1", "n2"],

      // 判断input框 数量篮子
      verifyInputNumBasketN1: "n1",

      // 临时存储判断input框 权重篮子
      verifyInputWeightBasket: ["NB", "NS", "NA", "NC"],

      // 判断input框 权重篮子
      verifyInputWeightBasketN2: "NB",

      // 按钮默认显示为 bsFlagNum = '3B'
      bsFlagNum: "3B",

      // 临时判断交易方向
      verifyBsFlagNum: ["3B", "3S", "3A", "3C"],

      // 交易方向字典
      bsFlagOptions: [
        { dictValue: "3B", dictLabel: "篮子买入" },
        { dictValue: "3S", dictLabel: "篮子卖出" },
        { dictValue: "3A", dictLabel: "篮子调仓" },
        { dictValue: "3C", dictLabel: "篮子清仓" },
      ],
    };
  },
  methods: {
    /**
     * @param selectedValue 篮子类型dictValue
     * @description 篮子类型影响交易方向和input输入框
     */
    basketChange(selectedValue) {
      // 遍历 赋值 付过 item=
      // 数量
      for (let i = 0; i < this.form.basketTypeDict.length; i++) {
        // 权重篮子
        if (
          this.form.basketTypeDict[i].dictValue === selectedValue &&
          selectedValue === 1
        ) {
          this.form.selectBsFlag = "";
          this.verifyInputWeightBasketN2 = "NB";
          this.verifyInputNumBasketN1 = "n2";
        }
      }
    },
    /**
     * @param selectedValue 交易方向dictValue
     * @description 由篮子类型和交易方向共同影响 input输入框
     */
    selectBsFlagChange(selectedValue) {
      for (let i = 0; i < this.verifyInputNumBasket.length; i++) {
        for (let j = 0; j < this.bsFlagOptions.length; j++) {
          // 篮子类型为 n2 ,交易方向动态获取判断
          if (
            selectedValue === this.bsFlagOptions[j].dictValue &&
            this.verifyInputNumBasketN1 === this.verifyInputNumBasket[i]
          ) {
            this.verifyInputWeightBasketN2 = this.verifyInputWeightBasket[j];
          }

          // 不论是权重篮子还是数量篮子 按钮变化
          if (selectedValue === this.bsFlagOptions[j].dictValue) {
            this.bsFlagNum = this.verifyBsFlagNum[j];
          }
        }
      }
    },

    /**
     * @description 篮子买入
     */
    buyBasket(a) {
      console.log(a);
    },

    /**
     * @description 篮子卖出
     */
    soldBasket(a) {
      console.log(a);
    },

    /**
     * @description 篮子调仓
     */
    adjustHouse(a) {
      console.log(a);
    },

    /**
     * @description 篮子清仓
     */
    removeHouse(a) {
      console.log(a);
    },
  },
};
</script>

3、关键代码说明

 /**
     * @param selectedValue 交易方向dictValue
     * @description 由篮子类型和交易方向共同影响 input输入框
     */
    selectBsFlagChange(selectedValue) {
      for (let i = 0; i < this.verifyInputNumBasket.length; i++) {
        for (let j = 0; j < this.bsFlagOptions.length; j++) {
          // 篮子类型为 n2 ,交易方向动态获取判断
          if (
            selectedValue === this.bsFlagOptions[j].dictValue &&
            this.verifyInputNumBasketN1 === this.verifyInputNumBasket[i]
          ) {
            this.verifyInputWeightBasketN2 = this.verifyInputWeightBasket[j];
          }

          // 不论是权重篮子还是数量篮子 按钮变化
          if (selectedValue === this.bsFlagOptions[j].dictValue) {
            this.bsFlagNum = this.verifyBsFlagNum[j];
          }
        }
      }
    },

4、仓库地址

仓库地址在码云上，Components目录，中文件BindSelectInputBtn.vue