element-plus弹窗中el-form使用resetFields方法不生效

太阳小姐姐

已于 2022-08-01 11:18:37 修改

阅读量1.2k

点赞数 1

分类专栏：前端开发文章标签： javascript 开发语言 ecmascript

于 2022-08-01 11:16:41 首次发布

本文链接：https://blog.csdn.net/weixin_41586389/article/details/126096748

版权

element-plus弹窗中使用el-form resetFields方法失效问题解决

摘要由CSDN通过智能技术生成

vue3 element-plus在dialog中使用form resetFields方法失效问题解决

问题：

添加或编辑某一条数据时，重制表单数据，没有效果

问题复现步骤：

1.编辑某条数据，然后取消编辑（已调用resetFields）
2.点击添加按钮，弹窗的form表单显示的是刚刚编辑的数据（这个效果不对，应该每个输入框或者选择框都是空数据）

解决思路：

不按问题复现步骤操作，连续添加数据，每次添加完再次打开弹框form每个字段是否是空值？
操作后发现连续添加再次打开弹框form每个字段是空值。
那么证明不是resetFields方法失效，而是编辑的时候数据回显时数据加载顺序有问题。下面附上问题代码：

const editTask = function(rowData){
	dataContainer.dialog.visible = true
    dataContainer.dialog.title = '编辑任务'
    dataContainer.dialog.flag = 'edit'
    dataContainer.rowData = rowData;
    dataContainer.form.taskName = rowData.taskName
    dataContainer.form.taskDesc = rowData.taskDesc
    dataContainer.form.deadLine = rowData.