iview表单重置以及重置验证信息

你的名字 2021-09-20 03:00 630阅读 0赞

表单内容添加一般都是在弹出框中进行编辑、修改、新增的  
如以下这段编辑代码：

<Modal :mask-closable="false" v-model="editMenuVisible" title="编辑菜单"
            ><Form :model="editMenuForm" :label-width="80" ref="editMenuFormRule">
              <FormItem label="菜单Id">
                <Input
                  v-model="editMenuForm.id"
                  placeholder="菜单Id"
                  disabled
                ></Input>
              </FormItem>
              <FormItem label="菜单名称">
                <Input v-model="editMenuForm.name" placeholder="菜单名称"></Input>
              </FormItem>
              <FormItem label="菜单路径">
                <Input
                  v-model="editMenuForm.url"
                  disabled
                  placeholder="菜单路径"
                  readonly
                ></Input>
              </FormItem>
              <FormItem label="图标路径">
                <Input v-model="editMenuForm.icon" placeholder="图标路径"></Input>
              </FormItem>
              <FormItem label="排序">
                <Input
                  v-model="editMenuForm.sortable"
                  placeholder="菜排序单名称"
                ></Input>
              </FormItem>
              <FormItem label="上级菜单Id">
                <Input
                  v-model="editMenuForm.parentId"
                  placeholder="上级菜单Id"
                  disabled
                ></Input>
              </FormItem>
              <FormItem label="描述">
                <Input
                  type="textarea"
                  v-model="editMenuForm.description"
                  placeholder="描述"
                ></Input>
              </FormItem>
            </Form>
            <div slot="footer">
              <Button type="text" @click="handleEditMenuCancel('editMenuFormRule')"
                >取消</Button
              >
              <Button type="primary" @click="handleEditSubmit()">确定</Button>
            </div>
          </Modal>

之前走了一个误区，**重置信息是直接走了弹出框的取消跟确定方法，其实只需要走表单的就可以，一些验证信息就会重置，就是下面的Button按钮触发的方法**，代码如下：

this.$refs['editMenuFormRule'].resetFields();
      this.editMenuVisible = false;
      formItem上要有prop这个属性