vue清空表单数据后显示所有列表内容

Posted 2023-05-16

参考技术A 清空按钮是增加了显示与隐藏。
使用vue侦探属性可以很简单实现，但是遇到了一个问题，因为在清空按钮是增加了显示与隐藏，点击后直接被隐藏掉，导致后面的侦探属性侦听不到值的变化。
在Vue中，清空表单数据指将表单中的数据全部清空，即将输入框、下拉框、单选框、多选框等表单元素中的值全部置为空。

关于element在vue中的使用--form表单清空验证

情景：在弹框中使用element表单。

问题：表单先回显后表单不清空

描述及原因：在初次打开弹框新增表单内容时，表单验证方法resetFields()是可以使用的，但是在如果页面是先回显数据时，如果使用该方法，表单就不会清空，后来观察了一下，是这个方法虽然不能清空，但是再修改后会重置到最初赋值状态，百度了一下，发现数据绑定在dom上是发生在mounted中的，而我们在定义数据时是发生在created时绑定的数据，所以重置时会重置到赋值的阶段。

解决方法：

1>this.$nextTick()将赋值操作放到dom渲染结束之后

2>我们需要清空表单时，调用初始化方法，这个方法用来初始需要赋值为空的表单。

显然第一种方法比较简便

参考链接：https://www.jianshu.com/p/21904d061007