解决elementUI中el-form、el-dialog、数据回显同时用时，有bug

提示：记录学习elementUI时遇到的一些问题及解决办法

---

前言

现象: 第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值
原因: 点击修改后，关闭对话框的时候，置空失效了
分析: 主人公resetFields有问题
线索1: Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot不会被渲染到 DOM 上
线索2: vue数据改变(先执行同步所有）再去更新DOM(异步代码)
无问题操作: 第一次打开网页，先点击新增按钮 -> dialog出现 -> el-form组件第一次挂载（关联的addForm对象的属性的值为空字符串） el-form组件内绑定了初始值，所以后续调用resetFields的时候，它可以用到空字符串初始值来重置
有问题: 第一次打开网页，先点击修改按钮 -> 虽然dialog变量为true了但是同步代码把addForm对象里赋值了(默认值) -> DON更新异步 -> dialog出现 -> el-form组件第一次挂载(使用addForm内置做回显然后第一次el-fonm内绑定了初始值(有值)) -> 以后做重置,它就用绑定的带值的做重置

---

按照1、2、3的顺序操作出现 bug ，图片展示：

按照1、2、3的顺序，在第二步、 第三步 操作时出现的图片，(设计时，是要点击第三步的地方是提出的框的数据清空，按照上面的步骤操作出现如下的情况)

按照1、3、2、3的顺序出现如下情况（这是正确的情况，我们要解决上面那种情况）

错误时的代码（主要看article.vue 的代码）

1. request.js 的代码

import axios from 'axios'
const baseURL = 'xxxxxx'
const myAxios = axios.create({
   
// 基地址
  baseURL
})

// 导出 axios 自定义函数
export default myAxios

2. api.js 的代码

/**
 * 获取-文章分类
 * @returns {*}
 */
const getArtCateListAPI = () => {
   
  return request({
   
    url: '/my/cate/list'
  })
}

/**
 * 添加-文章的分类
 * @param cate_name  cate_name:文章分类名
 * @param cate_alias  cate_alias:文章分类别名
 * @returns {*}
 */
const addArtCateAPI = ({
    cate_name, cate_alias}) => {
   
  return request({
   
    url: 'my/cate/add',
    method: 'POST',
    data: {
   
      cate_name,
      cate_alias
    }
  })
}

/**
 * 更新-文章分类
 * @param id  文章分类id
 * @param cate_name  文章分类名
 * @param cate_alias  文章分类别名
 * @returns {*}
 */
const updateArtCateAPI = ({
    id, cate_name, cate_alias}) => {
   
  return request({
   
    url: '/my/cate/info',
    method: 'put',
    data: {
   
      id,
      cate_name,
      cate_alias
    }
  })
}

// 导出接口
export {
   
addArtCateAPI,
getArtCateListAPI,
updateArtCateAPI
}

3. article.vue 代码

<template>
  <div>
    <!-- 预览文章 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span>