CabloyJS提供了与众不同的pc=mobile+pad
自适应布局。在mobile尺寸下,出差申请清单显示为列表布局
,而在pad和pc尺寸下,则显示为表格布局
默认情况下,表格布局显示以下字段:标题 / 描述 / 创建人 / 创建时间 / 修改时间
。在这里,我们要增加两个字段的显示:出差时间 / 出差地点
,同时删掉修改时间
修改布局配置
表格布局的配置信息在模块前端的config文件中,修改如下:
src/module/bz-businesstrip/front/src/config/config.js
- 1export default {
- 2 atoms: {
- 3 businesstrip: {
- 4 render: {
- 5 list: {
- 6 layouts: {
- 7 table: {
- 8 blocks: {
- 9 items: {
- 10 columns: [
- 11 {
- 12 dataIndex: 'atomName',
- 13 ...
- 14 },
- 15 {
- 16 dataIndex: 'description',
- 17 ...
- 18 },
- 19+ {
- 20+ dataIndex: 'tripTime',
- 21+ title: 'Trip Time',
- 22+ align: 'left',
- 23+ params: {
- 24+ dateFormat: 'YYYY-MM-DD',
- 25+ },
- 26+ },
- 27+ {
- 28+ dataIndex: 'tripAddress',
- 29+ title: 'Trip Address',
- 30+ align: 'left',
- 31+ },
- 32 {
- 33 dataIndex: 'userName',
- 34 ...
- 35 },
- 36 {
- 37 dataIndex: 'atomCreatedAt',
- 38 ...
- 39 },
- 40- {
- 41- dataIndex: 'atomUpdatedAt',
- 42- title: 'Modification Time',
- 43- align: 'left',
- 44- },
- 45 ],
- 46 },
- 47 },
- 48 },
- 49 },
- 50 },
- 51 },
- 52 },
- 53 },
- 54};
-
节点
atoms.businesstrip.render.list.layouts.table
负责配置表格布局
-
一个完整的布局是由不同的区块组成的,比如
标题区块
、清单区块
、页脚区块
等等。比如页脚区块
显示分页工具栏
。那么,在这里,节点blocks.items
就是负责配置清单区块
,我们只需修改其中的columns
节点即可 -
表格布局
底层采用Ant Design of Vue
中的table进行组件渲染,因此字段的配置参数也与antdv table
保持一致,请参见:Table 表格 -
配置说明
名称 | 说明 |
---|---|
dataIndex | 字段名称 |
title | 字段标题 |
align | 字段对齐方式 |
params.dateFormat | 对日期进行格式化 |
- 字段标题的国际化:我们同样需要提供字段标题的国际化语言资源。不过,在上一章节
添加字段
中,修改JSON Schema
时已经添加了相同的语言资源,这里就不必重复添加了,具体可参见文件:src/module/bz-businesstrip/front/src/config/locale/zh-cn.js
下一步
接下来,我们看看如何添加筛选字段
,让我们方便而快速的在清单中查找想要的数据
评论: