CabloyJS提供了与众不同的pc=mobile+pad自适应布局。在mobile尺寸下，出差申请清单显示为列表布局，而在pad和pc尺寸下，则显示为表格布局

默认情况下，表格布局显示以下字段：标题 / 描述 / 创建人 / 创建时间 / 修改时间。在这里，我们要增加两个字段的显示：出差时间 / 出差地点，同时删掉修改时间

修改布局配置

表格布局的配置信息在模块前端的config文件中，修改如下：

src/module/bz-businesstrip/front/src/config/config.js

  1. 1export default {
  2. 2  atoms: {
  3. 3    businesstrip: {
  4. 4      render: {
  5. 5        list: {
  6. 6          layouts: {
  7. 7            table: {
  8. 8              blocks: {
  9. 9                items: {
  10. 10                  columns: [
  11. 11                    {
  12. 12                      dataIndex: 'atomName',
  13. 13                      ...
  14. 14                    },
  15. 15                    {
  16. 16                      dataIndex: 'description',
  17. 17                      ...
  18. 18                    },
  19. 19+                   {
  20. 20+                     dataIndex: 'tripTime',
  21. 21+                     title: 'Trip Time',
  22. 22+                     align: 'left',
  23. 23+                     params: {
  24. 24+                       dateFormat: 'YYYY-MM-DD',
  25. 25+                     },
  26. 26+                   },
  27. 27+                   {
  28. 28+                     dataIndex: 'tripAddress',
  29. 29+                     title: 'Trip Address',
  30. 30+                     align: 'left',
  31. 31+                   },
  32. 32                    {
  33. 33                      dataIndex: 'userName',
  34. 34                      ...
  35. 35                    },
  36. 36                    {
  37. 37                      dataIndex: 'atomCreatedAt',
  38. 38                      ...
  39. 39                    },
  40. 40-                   {
  41. 41-                     dataIndex: 'atomUpdatedAt',
  42. 42-                     title: 'Modification Time',
  43. 43-                     align: 'left',
  44. 44-                   },
  45. 45                  ],
  46. 46                },
  47. 47              },
  48. 48            },
  49. 49          },
  50. 50        },
  51. 51      },
  52. 52    },
  53. 53  },
  54. 54};

  1. 节点atoms.businesstrip.render.list.layouts.table负责配置表格布局

  2. 一个完整的布局是由不同的区块组成的，比如标题区块、清单区块、页脚区块等等。比如页脚区块显示分页工具栏。那么，在这里，节点blocks.items就是负责配置清单区块，我们只需修改其中的columns节点即可

  3. 表格布局底层采用Ant Design of Vue中的table进行组件渲染，因此字段的配置参数也与antdv table保持一致，请参见：Table 表格

  4. 配置说明

名称 说明
dataIndex 字段名称
title 字段标题
align 字段对齐方式
params.dateFormat 对日期进行格式化
  1. 字段标题的国际化：我们同样需要提供字段标题的国际化语言资源。不过，在上一章节添加字段中，修改JSON Schema时已经添加了相同的语言资源，这里就不必重复添加了，具体可参见文件：src/module/bz-businesstrip/front/src/config/locale/zh-cn.js

下一步

接下来，我们看看如何添加筛选字段，让我们方便而快速的在清单中查找想要的数据

延伸阅读