点击单选框时动态的控制表单项的显示和隐藏

如上图所示，有这样的一个需求，当用户点击同意的时候不需要显示审批原因。当用户点击不同意时才显示审批原因这个输入框。

首先我们在同意不同意这个单选框上面绑定一个change事件，当它的value变化时我们也跟着变化

<el-form-item :label="$t('lang.application.convergence')" prop="dataApproval">
          <el-radio-group v-model="form.dataApproval" @change="change">
            <el-radio
              v-for="dict in dict.type.approve_result_type"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>

methods中定义一下

change(){
      if(this.form.dataApproval=='0'){
        this.connectedUnit = true;
      }else{
        this.connectedUnit = false;
      }
    },

这里我们的单选框同意对应的值是'0'，不同意对应的值是'1'

我们在data中定义一下connectedUnit，这个用来控制审批原因输入框的显示和隐藏

connectedUnit:true,

对应审批原因输入框，我们使用v-if去控制显示和隐藏

<el-form-item :label="$t('lang.portaldata.reason')" prop="approveDesc" v-if="connectedUnit==false">
            <el-input type="textarea" :row="4" v-model="form.approveDesc"/>
        </el-form-item>

程序员灯塔
转载请注明原文链接：点击单选框时动态的控制表单项的显示和隐藏