ElementUI中el-select下拉框选择不同的项控制其他控件(单选控件)的显示和隐藏

场景

在el-select的下拉框中，下拉选择指定的下拉项时才会显示后面的单选框，否则不显示。

效果如下

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先在页面中添加这两个控件

 

       
          "10">
            "班次类型:" prop="bclx">
              select v-model="form.bclx" placeholder="请选择班次类型" clearable @change="bclxChange">
                option
                  v-for="dict in bclxOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              select>
            
          
          "10" v-if="isJxBc">
            "井下班次类型:" prop="jxbclx" label-width="120px">
              "form.jxbclx" @change="$forceUpdate()" size="medium">
                '"1"'>井下大班
                '"2"'>井下小班
              
            
          
        

然后设置 要动态显示的单选框控件的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。