ElementUI组件Dialog弹窗再次打开表单清除上次表单的必填验证提示

1.实现效果

2.解决方法

      <div class="dialogArea">
        <el-dialog title="新建分类" :visible.sync="dialogFormVisible" width="500px">
          <el-form :model="addSortform" ref="addSortform" :rules="rules" label-width="auto" label-position="left">
            <el-form-item label="分组名称" prop="categoryName">
              <el-input maxLength="10" v-model.trim="addSortform.categoryName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上级分组" prop="parentId">
              <el-select v-model="addSortform.parentId" placeholder="请选择上级目录">
                <el-option v-for="item in prelists" :key="item.id"
                  :label="tem.label" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark" class="endItem">
              <el-input type="textarea" v-model="addSortform.remark" :autosize="{ minRows: 3, maxRows: 25 }"
                :maxlength="255" clearable></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveAddsort" class="saveAddBtn">保 存</el-button>
          </div>
        </el-dialog>
      </div>

//js
  watch: {
    //监听新建分类弹窗是否显示控制位
    dialogFormVisible(newVal, oldVal) {
      if (newVal == true) {
        //这里这样写才能拿到this.$refs["addSortform"]实例
        this.$nextTick(() => {
          this.$refs["addSortform"].resetFields();
        });
      }
    },
  },
methods:{
//触发dialog显示方法
    addSort() {
      this.treeFlag = 1;
      followupSortList().then((res) => {
      /.../
        this.dialogFormVisible = true;
      });
    },
}