element刷新表单校验

需求:在这里插入图片描述
表单代码:

 <el-dialog
        class="dialog-container"
        :title="formEditTitle"
        :visible.sync="dialogEdittVisible"
        @close="closeDialog('formEdit')"
        @keyup.enter.native="onConfirm"
      >
        <el-form ref="formEdit" :rules="rulesEdit" :model="formEdit" :inline="true">
          <el-form-item label="对象类型" prop="monitorObjType" class="form-item-short">
            <el-select
              v-model="formEdit.monitorObjType"
              filterable
              class="item-select"
              @change="onChangeEditMonitorObjType"
            >
              <el-option
                v-for="item in optionsEditMonitorObjType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <template v-if="this.monitorObjType === 'SERVER'">
            <el-form-item label="监控对象" prop="monitorObjNum" class="form-item-short">
              <el-select
                v-model="formEdit.monitorObjNum"
                filterable
                class="item-select"
                @focus="onFocusMonitorObj"
              >
                <el-option
                  v-for="item in optionsMonitorObjEdit"
                  :key="item.id"
                  :label="item.name"
                  :value="item.num"
                />
              </el-select>
            </el-form-item>
          </template>
          <template v-if="this.monitorObjType === 'SYSTEM'">
            <el-form-item label="监控编号" prop="monitorObjNum" class="form-item-short">
              <el-input
                v-model.trim="formEdit.monitorObjNum"
                placeholder="监控对象编号"
                class="item-input"
              />
            </el-form-item>
            <el-form-item label="监控名称" prop="monitorObjName" class="form-item-short">
              <el-input
                v-model.trim="formEdit.monitorObjName"
                placeholder="监控对象名称"
                class="item-input"
              />
            </el-form-item>
          </template>
          <el-form-item :key="1" label="用户名" prop="username" class="form-item-short">
            <el-input v-model.trim="formEdit.username" placeholder="用户名" class="item-input" />
          </el-form-item>
          <el-form-item label="密码" prop="password" class="form-item-short">
            <el-input
              v-model.trim="formEdit.password"
              placeholder="密码"
              class="item-input"
              show-password
            />
          </el-form-item>
          <el-form-item label="ip地址" prop="ipAddress" class="form-item-short">
            <el-input v-model.trim="formEdit.ipAddress" placeholder="ip地址" class="item-input" />
          </el-form-item>
          <el-form-item label="端口号" prop="port" class="form-item-short">
            <el-input v-model.number="formEdit.port" placeholder="端口号" class="item-input" />
          </el-form-item>
          <el-form-item label="是否启用" prop="enabled" class="form-item-short">
            <el-radio-group v-model="formEdit.enabled" size="mini">
              <el-radio :label="true">启用</el-radio>
              <el-radio :label="false">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogEdittVisible = false">取 消</el-button>
          <el-button type="primary" @click="onConfirm">确 定</el-button>
        </div>
      </el-dialog>

使用深度监听表单的变化:

// 刷新校验规则
  watch: {
    formEdit: {
      deep: true,
      handler(val) {
        // console.log(val,999)
        this.FromEdit = {}
        this.$nextTick(() => {
          this.$refs.formEdit.resetFields()
        })
      }
    }
  },

猜你喜欢

转载自blog.csdn.net/qq_43942185/article/details/107930376
今日推荐