Table 进阶

经过前几章的学习，我们已经了解了开发复杂界面的基本知识，接下来我们逐步扩展之前的 Table，实践一下对应知识点。

需要大致实现的 Table:

可以看到对比之前的 Table 功能点多了很多，具体需求如下：

添加字段
行内编辑
对相关字段做必要补充说明
年龄大于 18，性别必输
年龄输入范围需大于 1 小于 100
年龄可排序
姓名必输，且为主键、唯一
邮箱后缀自动填充
存在查询条，可搜索查询
添加操作按钮

同样的我们从 DataSet 结合要显示的数据入手进行扩展。

功能扩展

从界面上可得出，我们扩展新增了三个字段：年龄（age）、邮箱（email）、加入日期（startDate）。

fields 数组中初步添加字段配置，完成第一点。

{
  name: 'age',
  type: 'number',
  label: '年龄',
},
{
  name: 'email',
  type: 'string',
  label: '邮箱',
},
{
  name: 'startDate',
  type: 'date',
  label: '加入日期',
}

Table 支持行内编辑。编辑组件载体为 Table，我们查看 Table 组件 API，columns 对象添加 editor 属性即可实现行内编辑。

属性名	描述	类型
editor	编辑器, 设为true时会根据 field 的 type 自动匹配编辑器。不可编辑请使用false值，而不是在控件上加 disabled。	FormField \| ((record, name) => FormField \| boolean) \| boolean

[
  { name: 'name', editor: true },
  { name: 'age', editor: true },
  { name: 'sex', editor: true },
  { name: 'email', editor:true },
  { name: 'code', editor: true },
  { name: 'startDate', editor: true },
  { name: 'active', editor: true },
]

对相关字段做补充说明。处理对象为字段，查看 API 可得 help 属性。完善对应字段配置。

属性名	描述	类型
help	额外信息，常用于提示	string

{
  name: 'name',
  type: 'string',
  label: '姓名',
  help: '主键，区分用户',
},
{
  name: 'age',
  type: 'number',
  label: '年龄',
  help: '用户年龄，可以排序',
},
{
  name: 'email',
  type: 'string',
  label: '邮箱',
  help: '用户邮箱，可以自动补全',
},

实现效果：

年龄大于 18，性别字段必输。分析需求，需要动态处理性别字段配置，可使用我们上一章提到的dynamicProps。

{
  name: 'sex',
  ...
  dynamicProps: {
    required: ({ record }) => record.get('age') > 18,
  },

年龄输入范围需大于 1 小于 100。普通组件库需要在输入时判断处理，这里我们同样可以使用字段属性配置 - min / max。可配置类型：字段名 | 数字 | 日期。

属性名	描述	类型
max	最大值。 fieldName 指向当前记录的 fieldName 值作为最大值。	number \| MomentInput \| fieldName
min	最小值。 fieldName 指向当前记录的 fieldName 值作为最小值。	number \| MomentInput \| fieldName

这里我们修改年龄字段：

{
  name: 'age',
  type: 'number',
  label: '年龄',
  max: 100,
  min: 1,
  step: 1,
  help: '用户年龄，可以排序',
},

年龄字段支持表格排序。这里处理对象在表格，查看文档可得 sortable 属性。

属性名	描述	类型	默认值
sortable	是否可排序（后端请求排序，前端排序请自定义 header 自行实现）	boolean	false

{ name: 'age', sortable: true, editor: true },

姓名必输，且为主键、唯一。查看 field props 修改姓名字段配置。

{
  name: 'name',
  type: 'string',
  label: '姓名',
  unique: true, // 唯一索引或联合唯一索引组名 设置可编辑只有新增才能编辑,确保该字段或字段组唯一性
  help: '主键，区分用户',
  required: true,
},

邮箱后缀自动填充。

具体表现为输入时自动补足已有的邮箱后缀，这里我们常用的组件是AutoComlpete。邮箱后缀的数据源可前端写死也可后端查询维护。

这里我们做一下实现步骤拆解：

1. 行内编辑器根据 type 默认匹配 EmailField 组件，我们需要修改为 AutoComlpete 组件
2. 为 AutoComlpete 组件配置自动补全数据源，对应 options 属性
3. 处理 AutoComlpete 输入获焦事件，判断是否需要后缀

a. 修改 email 列 editor 属性，替换默认编辑器：

{
  name: 'email',
  editor: () => {
    return (
      <AutoComplete
        onFocus={handleValueChange}
        onInput={handleValueChange}
        options={emailOptionDS}
      />
    );
  },
},

b. 处理数据源 emailOptionDS（这里类似 Select 组件数据源操作，后续详解）：

const emailOptionDS = useMemo(() => {
  return new DataSet({
    fields: [
      {
        name: 'value',
        type: 'string',
      },
      {
        name: 'meaning',
        type: 'string',
      },
    ],
  });
}, []);

c. 处理组件上的事件，为数据源 emailOptionDS 加载数据：

const handleValueChange = useCallback((v) => {
  const { value } = v.target;
  const suffixList = ['@qq.com', '@163.com', '@hand-china.com'];
  if (value.indexOf('@') !== -1) {
   // 如果输入值中包含 @ 不配置数据，自定义输入
    emailOptionDS.loadData([]);
  } else {
    emailOptionDS.loadData(
      suffixList.map((suffix) => ({
        value: `${value}${suffix}`,
        meaning: `${value}${suffix}`,
      })),
    );
  }
}, [emailOptionDS]);

处理完毕，编辑邮箱字段看看效果：

为 Table 配置查询条，支持查询条件。这里就应用到 DataSet queryFields 结合 Table queryBar属性了，queryFields 用法同 fields：

属性名	描述	类型
queryFields	查询字段属性数组，在内部生成 queryDataSet，优先级低于 queryDataSet 属性，详见Field Props	object[]

我们配置三个查询条件：姓名、年龄、邮箱：

queryFields: [
  {
    name: 'name',
    type: 'string',
    label: '姓名',
  },
  {
    name: 'age',
    type: 'number',
    label: '年龄',
    max: 100,
    step: 1,
  },
  {
    name: 'email',
    type: 'string',
    label: '邮箱',
    help: '用户邮箱，可以自动补全',
  }
],

这时界面对应渲染如下：

查看 Table queryBar 属性，默认类型为 normal，我们试试使用 professionalBar：

属性名	描述	类型	默认值
queryBar	查询条, 可选值为钩子或者内置类型：filterBar \| professionalBar \| advancedBar \| normal \| bar \| none	string \| ({ dataSet, queryDataSet, buttons, pagination, queryFields, queryFieldsLimit }) => ReactNode	normal

queryBar="professionalBar"

可以看到对应搜索条和我们想要的一行展示数量还是不同，查找 API 可得：

属性名	描述	类型
queryFieldsLimit	头部显示的查询字段的数量，超出限制的查询字段放入弹出窗口	number

queryFieldsLimit={2}

最终效果：

可尝试修改 queryBar 为其他类型，看看不同的预置查询交互吧。如果都不符合产品需求，也支持自定义并全局配置的。

添加操作按钮。这块便于教学，配置 Table buttons 添加了以下 8 个按钮：

属性名	描述	类型
buttons	功能按钮，内置按钮可添加afterClick钩子，用于执行除了默认行为外的动作，可选值：adddeleteremovesavequeryresetexpandAllcollapseAllexport或数组或自定义按钮，数组为可选值字符串+按钮配置属性对象	string \| [string, object] \| ReactNode \| object

buttons={['add', 'query', 'save', 'delete', 'reset', toDataButton, toJSONDataButton, setQueryParamButton]}

新增
查询
保存
删除
重置
toDataButton - tableDS.toData()
toJSONDataButton - tableDS.toJSONData()
setQueryParamButton - tableDS.setQueryParameter(‘customPara’, ‘test’)

前五个为预置按钮类型，内置封装对应含义逻辑。后三个为演示自定义逻辑触发按钮：

const [consoleValue, setConsoleValue] = useState('');
const toDataButton = (
  <Button onClick={() => setConsoleValue(tableDS.toData())}>
    toData
  </Button>
);
const toJSONDataButton = (
  <Button onClick={() => setConsoleValue(tableDS.toJSONData())}>
    toJSONData
  </Button>
);
const setQueryParamButton = (
  <Button onClick={() => tableDS.setQueryParameter('customPara', 'test')}>
    setQueryParameter
  </Button>
);

输出验证

这里我们将对应变化内容使用CodeArea组件做了展示。

import {
  CodeArea
} from 'choerodon-ui/pro';
// 引入格式化器，注意使用模块的默认导出
import JSONFormatter from 'choerodon-ui/pro/lib/code-area/formatters/JSONFormatter';
//return中添加
<CodeArea
  style={{ height: 280 }}
  formatter={JSONFormatter}
  value={JSON.stringify(consoleValue)}
/>

输出展示内容：

DataSet events 中 query 事件查询参数
toDataButton & toJSONDataButton 调用方法
提交 transport create 类型参数

首先我们应用了 DataSet events 事件：

// DS 事件回调
events: {
  load: ({ dataSet }) => {
    console.log('加载完成', dataSet)
  },
  query: ({ params, data }) => setConsoleValue({params, data}),
}