# Model 模型

# 为什么要写模型？

# 少写字段中文名称

比如一个用户管理页面

# 搜索表单里

搜索区域有一个搜索项用户名称，那么相关代码可能是<FormItem prop="userName" label="用户名称">。

# 表格列里

数据展示区域的表格有一列用户名称，那么该列的配置大概是{ dataIndex: 'userName', title: '用户名称' }。

# 新增页面中

表单有一项用户名称，代码<FormItem prop="userName" label="用户名称">。

# 验证提示中

有的验证规则还得写一个必填的提示请输入用户名称，代码 { required: true, message: '请输入用户名称' }。

# 需求变更的代价

偶尔还会碰到产品告诉你，我们这里不叫用户名称了，改成金主爸爸。 你就得全文搜索用户名称,然后还要一个个看看搜索结果里出来的能不能改。

用了模型之后，你在所有地方，只需要写字段名称就行，所有的组件，会自动从模型里面找到该字段对应的中文名称。

# 搜索表单里

<FormItem prop="userName"label="用户名称">

# 表格列里

{ dataIndex: 'userName',title: '用户名称'}

# 新增页面中

<FormItem prop="userName"label="用户名称">

# 验证提示中

模型提供的功能，可以让你无需填写验证的message。

# 统一数据格式交互流程

通常我们编辑一条数据，会经历以下几个步骤。

  • 根据 id 请求接口获取详细数据
  • 页面上各种组件交互更新数据
  • 点击保存，构造请求参数，请求保存接口

那么某个字段对应的就要去做处理

  • 查询接口拿到数据，要转成组件需要的格式。
  • 提交保存的时候，根据组件的输出，可能还需要转成接口需要的格式。

举个例子来说，在编辑用户的时候，有个字段是兴趣爱好，下拉，多选。 获取详情的接口返回的值可能是[{label,value}...]这样一个数组，但是页面上的下拉组件接收的value值可能是[value1,value2...]这样的格式，然后保存接口也许是需要逗号拼接的字符串。

那么这时候就可以定义出一个字段的行为，把这些行为统一起来。

#

# 怎么写模型？

← 定义模型 →