• 08表单校验之联动校验(下拉框的某个选项触发另一项要校验)


     

     需求:

    1. 字段类型本身是有需要必选的校验,只有当且选择数据字典时,才会动态的触发来源字典的校验(必填),反之,去除来源字典的校验。

    2. 当下拉框选择数据字典后,触发了来源字典的校验,这时候来源字典满足校验后,会移除错误提示信息,反之,没有输入任何内容失焦后又会重新触发校验;当下拉框切换为非数据字典的选项时,又执行上面第一条的校验逻辑

    3.当下拉框选择数据字典时,来源字典会动态展示红星( * ),反之,不显示红星; 红星是为了跟element的form表单风格保持一致。(需要自己手动实现,因为不会实时触发视图更新)

    实现效果:

    来源字典输入后,符合校验,隐藏了错误提示;清空后又重新触发了必填校验


     代码实现:

     data() {
        return {
          formObj: {
            fieldType: '',   //字段类型下拉框
            sourceDict: '', //来源字典
          },
    }
       <el-row :gutter="110">
                <el-col :span="12">
                  <el-form-item label="字段类型" prop="fieldType">
                    <el-select
                      v-model="formObj.fieldType"
                      style=" 100%"
                      placeholder="请选择"
                      @blur="blurSelect('fieldType')"
                      @change="blurSelect('fieldType')"
                    >
                      <el-option v-for="item in fieldTypeSelectData" :key="item.id" :label="item.itemText" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <div class="sourceDict_box">
                    <i v-if="formObj.fieldType === '4'" class="star">*</i>   //红*
                    <el-form-item style="padding-left: 6px" label="来源字典" prop="sourceDict">
                      <el-input v-model="formObj.sourceDict"></el-input>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
      watch: {
        formObj: {
          deep: true,
          handler(val) {
            if (Number(val.fieldType) === 4 && val.sourceDict === '') {
              this.formblurRequiredRuleFn({    //此为封装的必填方法
                sourceDict: ['来源字典', '输入']
              })
              this.$refs.ruleForm.validateField('sourceDict') //单独触发校验
            } else {
              this.$refs.ruleForm.clearValidate(['sourceDict']) //移除校验
            }
          }
        }
      },

    红星样式:

    .sourceDict_box {
      position: relative;
      .star {
        position: absolute;
        left: -5px;
        top: 11px;
        color: #f56c6c;
        font-size: 20px;
      }
    }
  • 相关阅读:
    牢固你的人际关系三十六计
    Google 将携手大众,开发新一代汽车导航系统
    C++图书热点观察[转]
    Qt程序http报错 TLS initialization failed
    基于kinova jaco2机械臂的仿真模拟
    IfcBuild2Axes
    threejs绘制多边形2
    QAction
    java Math.pow
    yolov5模型地址
  • 原文地址:https://www.cnblogs.com/haoqiyouyu/p/15878286.html
Copyright © 2020-2023  润新知