場景

在el-select的下拉框中，下拉選擇指定的下拉項(xiàng)時(shí)才會(huì)顯示后面的單選框，否則不顯示。

效果如下

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

首先在頁面中添加這兩個(gè)控件

??????? <el-row><el-col span="10"><el-form-item label="班次類型:" prop="bclx"><el-select v-model="form.bclx" placeholder="請選擇班次類型" clearable @change="bclxChange"><el-optionv-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>

然后設(shè)置 要?jiǎng)討B(tài)顯示的單選框控件的v-if="isJxBc"來控制其顯示和隱藏，其中isJxBc是一個(gè)布爾變量。

需要提前聲明

? isJxBc: false,

然后在前面下拉框中設(shè)置change事件@change="bclxChange"

在change事件中

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

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

數(shù)據(jù)來源是bclxOptions構(gòu)建的對象數(shù)組

?

下拉框的值選的是dictValue，下拉框顯示的內(nèi)容是dictLabel。

總結(jié)

以上是生活随笔為你收集整理的ElementUI中el-select下拉框选择不同的项控制其他控件(单选控件)的显示和隐藏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。