ElementUI组件Dialog弹窗再次打开表单清除上次表单的必填验证提示
1.实现效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7c651ba2cc84a285e2d4bc79d95498f6.gif#pic_center)
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>
watch: {
dialogFormVisible(newVal, oldVal) {
if (newVal == true) {
this.$nextTick(() => {
this.$refs["addSortform"].resetFields();
});
}
},
},
methods:{
addSort() {
this.treeFlag = 1;
followupSortList().then((res) => {
/.../
this.dialogFormVisible = true;
});
},
}