element 表单restFields不生效的问题

Posted 2023-05-12

参考技术A 开发过程中出现了resetFields表单无法重置的问题
问题：
因为新增和编辑的字段是一样的，所以把他们放在一个弹框表单中了。、
重现：
进入列表页面后，先点击编辑按钮，然后点击新增按钮，显示的弹出框显示刚才编辑的内容。
弹出框的close方法是调用了resetFields方法的，但是没有生效。
resetFields不生效的原因：
此方法是将form表单的数据设置为初始值，而这个初始值是在form mouted生命周期被赋值上去的。所以，在form mounted之前，如果form表单赋值了，那么后面调用resetFields都是无效的，因为form表单的初始值已经在mounted之前就被赋值了。
解决办法：
只要在form表单mounted之后再进行赋值操作这样就可以完美解决问题了，也就是说在点击编辑赋值的时候使用this.$nextTick方法
修改前：

修改后：

vue引入element-ui不生效

为了同样的错误不再犯第三次，我决定用文字记录，

在写vue项目时 最初需要用到 dev-tools 所以根据要求需要引入vue.js 我使用的是bootstrap的cdn

然后后来需要使用element-ui，引入方式和官网的一样，启动项目也不报错，但是重要的是，鸡毛都没有，压根儿就没有渲染元素，

于是很难受，尝试各种决绝方案，最后皇天不负有心人，解决了。于是乎很开心的写下这篇日志，

element和cdn冲突去掉引入的cdn即可