1.    通常来讲，表单会有三种状态：**新建、编辑、查看**，大体对应CRUD中的三种业务逻辑，即Create、Update、Read。
  3.    表单在新建状态、编辑状态，数据绑定字段都是可操作、可录入的，**新建和编辑的差别在于表单数据对象的id是否有值**。通常新建表单的数据提交到后端，由后端负责生成id值，编辑时读取后端接口，返回的数据对象包含id值。<br />       因此要区分表单的新建和编辑状态就变得很简单，只需要在表单中增加一个单行输入字段，并将字段唯一名称设置为后端对应的id属性名称，然后将该字段设置为隐藏，相当于在表单中增加了一个id隐藏字段，如下图所示：<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/12445330/1632797649136-a8226f3d-a21d-4a56-8675-83c35179c9f7.png#clientId=u7dc3ce45-dcf5-4&from=paste&height=665&id=u01d09099&margin=%5Bobject%20Object%5D&name=image.png&originHeight=887&originWidth=1476&originalType=binary&ratio=1&size=90119&status=done&style=stroke&taskId=u0ef8ae9e-e85c-45a9-b45a-dbd8f3680dd&width=1107)

新建状态表单操作

  1. 首先调用后端新建接口（如果有的话，没有则不调用），获取到表单数据对象formData；
  2. 调用setFormData(formData)方法，完成新建状态的表单数据展示；
  3. 点击表单提交按钮，调用getFormData()方法，利用axios跟后端接口交互，将表单数据保存到数据库。

编辑状态表单操作

操作基本同上，区别在于从后端获取到的formData对象包含id值。

  1. 首先调用后端数据读取接口，获取到表单数据对象formData；
  2. 调用setFormData(formData)方法，完成编辑状态的表单数据展示；
  3. 点击表单提交按钮，调用getFormData()方法，利用axios跟后端接口交互，将表单数据保存到数据库。

查看状态表单操作

  1. 首先调用后端数据读取接口，获取到表单数据对象formData；
  2. 调用setFormData(formData)方法，加载表单数据展示；
  3. 接着调用disableForm()方法，将表单设置为禁止编辑状态；
  4. 如需从查看状态切换到编辑状态，则调用方法enableForm()。