vue3 + elementui Plus 问题记录

MUZI_0419

已于 2024-03-19 18:30:07 修改

阅读量1k

点赞数 17

文章标签： vue elementui

于 2024-03-19 09:18:12 首次发布

本文链接：https://blog.csdn.net/qq_34868027/article/details/136829616

版权

在使用Vue3和ElementPlus构建项目时，遇到dialog中的嵌套form表单，resetFields方法在特定情况下失效。文章描述了问题场景、解决方案两种方法，即在打开对话框时深拷贝数据并延迟设置，确保resetFields能返回初始默认值。

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

vue3 + elementui Plus 问题记录

第一章表单重置resetFields方法不生效

问题：

做项目的时候, dialog组件嵌套from表单, resetFields 重置无效:
1.先点击了「修改」，弹出弹窗，此时弹窗的el-form表单已经赋值；
2.再点击新增按钮，弹出弹窗，已经有之前修改的值，此时调用resetFields()方法不能使el-form清空的；
(如果先点击「新增」，关闭后再点击「修改」就可以)

解决：

当我们打开对话框时，我们已经赋值完毕了，所以使用resetFields会重置到赋完值的状态

// 方案一：
async function openDialog  (type: string, row: any)  {
  isShowDialog = true;
  diaType = type;
  if (type === 'edit') {
    diaObj.title = '修改';
    const editFormObj =  JSON.parse( JSON.stringify( row) );
   
  	//重点
    await  nextTick();
    dataObj.addForm = editFormObj;

  }
// 方案二：
const openDialog = (type: string, row: any) => {
  isShowDialog = true;
  diaType = type;
  if (type === 'edit') {
    diaObj.title = '修改';
    const editFormObj =  JSON.parse( JSON.stringify( row) );
   
  	//重点
    nextTick( () => {
    dataObj.addForm = editFormObj;
	});
  }