el-select下拉框和el-button绑定情况，用户选择不同下拉框，按钮显示不同？

1、效果图

2、代码

<template>
  <div>
    <el-form :model="form">
      <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>
      <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 {
      // 按钮默认显示为 bsFlagNum = '3B'
      bsFlagNum: "3B",

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

      // 存放表单元素
      form: {
        selectBsFlagDefault: "",
      },

      // 交易方向字典
      bsFlagOptions: [
        { dictValue: "3B", dictLabel: "篮子买入" },
        { dictValue: "3S", dictLabel: "篮子卖出" },
        { dictValue: "3A", dictLabel: "篮子调仓" },
        { dictValue: "3C", dictLabel: "篮子清仓" },
      ],
    };
  },
  methods: {
    /**
     * @param selectedValue
     * @description el-select下拉框change事件
     */
    selectBsFlagChange(selectedValue) {
      console.log(selectedValue);
      switch (selectedValue) {
        case "3B":
          this.bsFlagNum = this.verifyBsFlagNum[0];
          break;
        case "3S":
          this.bsFlagNum = this.verifyBsFlagNum[1];
          break;
        case "3A":
          this.bsFlagNum = this.verifyBsFlagNum[2];
          break;
        case "3C":
          this.bsFlagNum = this.verifyBsFlagNum[3];
          break;
      }
    },

    buyBasket(a) {
      console.log(a);
    },

    soldBasket(a) {
      console.log(a);
    },
    adjustHouse(a) {
      console.log(a);
    },
    removeHouse(a) {
      console.log(a);
    },
  },
};
</script>

3、简单说明

该功能主要是通过v-if来实现，符合条件的进行相应操作；比如v-if=“bsFlagNum === ‘3B’” 买入要显示指令只买按钮；其他的类似。

4、仓库地址

仓库地址