場景

在el-select的下拉框中，下拉選擇指定的下拉項時才會顯示後面的單選框，否則不顯示。

效果如下

注：

部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。

實現

首先在頁面中新增這兩個控制元件

       <el-row>
          <el-col span="10">
            <el-form-item label="班次型別:" prop="bclx">
              <el-select
 
 v-model="form.bclx" placeholder="請選擇班次型別" clearable @change="bclxChange">
                <el-option
                  v-for="dict in bclxOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select
 
>
            </el-form-item>
          </el-col>
          <el-col span="10" v-if="isJxBc">
            <el-form-item label="井下班次型別:" prop="jxbclx" label-width="120px">
              <el-radio-group v-model="form.jxbclx" @change="$forceUpdate()" size="medium">
                <el-radio :label='
 
"1"'>井下大班</el-radio>
                <el-radio :label='"2"'>井下小班</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

然後設定 要動態顯示的單選框控制元件的v-if="isJxBc"來控制其顯示和隱藏，其中isJxBc是一個布林變數。

需要提前宣告

isJxBc: false,

然後在前面下拉框中設定change事件@change="bclxChange"

在change事件中

    bclxChange(selectValue) {
      if (selectValue == 1) {
        this.isJxBc = true;
      } else {
        this.isJxBc = false;
      }
    },

判斷選中項的值是否為1,1就代表選中的是井下班制即要顯示後面的單選框的下拉選項。

資料來源是bclxOptions構建的物件陣列

下拉框的值選的是dictValue，下拉框顯示的內容是dictLabel。