如果我们需要定制原子布局，只需要按照默认布局的JSON规范，在业务模块中按需修改即可。系统会自动将两个JSON规范合并。因此，定制布局的JSON规范往往是增量部分，所以开发起来非常便捷

下面以业务模块test-party为例，说明如何配置原子类型party的table布局

atoms.{atomClass}.render.list

定制布局的JSON配置定义在atoms.{atomClass}.render.list中，在这里就是：atoms.party.render.list。为了让代码简洁，这些JSON配置都放入一个单独的文件中

src/module-vendor/test-party/front/src/config/config.js

  1. 1import configPartyRenderList from './config/configPartyRenderList.js';
  2. 2...
  3. 3export default {
  4. 4  ...
  5. 5  atoms: {
  6. 6    party: {
  7. 7      render: {
  8. 8        list: configPartyRenderList,
  9. 9        ...
  10. 10      },
  11. 11    },
  12. 12  },
  13. 13};

src/module-vendor/test-party/front/src/config/config/configPartyRenderList.js

  1. 1const list = {
  2. 2  info: {
  3. 3    orders: [
  4. 4      { name: 'partyTypeCode', title: 'Party Type' },
  5. 5      { name: 'personCount', title: 'Person Count', by: 'asc' },
  6. 6    ],
  7. 7  },
  8. 8  layouts: {
  9. 9    table: {
  10. 10      blocks: {
  11. 11        items: {
  12. 12          columns: [
  13. 13            {
  14. 14              dataIndex: 'atomName',
  15. 15              title: 'Atom Name',
  16. 16              align: 'left',
  17. 17              component: {
  18. 18                module: 'a-baselayout',
  19. 19                name: 'listLayoutTableCellAtomName',
  20. 20              },
  21. 21            },
  22. 22            {
  23. 23              dataIndex: 'partyTypeCode',
  24. 24              title: 'Party Type',
  25. 25              align: 'left',
  26. 26              params: {
  27. 27                computed: {
  28. 28                  expression: 'record._partyTypeCodeTitleLocale',
  29. 29                },
  30. 30              },
  31. 31            },
  32. 32            {
  33. 33              dataIndex: 'partyTime',
  34. 34              title: 'Party Time',
  35. 35              align: 'left',
  36. 36            },
  37. 37            {
  38. 38              dataIndex: '_partyCityTitleLocale',
  39. 39              title: 'Party City',
  40. 40              align: 'left',
  41. 41            },
  42. 42            {
  43. 43              dataIndex: 'personCount',
  44. 44              title: 'Person Count',
  45. 45              align: 'left',
  46. 46            },
  47. 47            {
  48. 48              dataIndex: 'userName',
  49. 49              title: 'Creator',
  50. 50              align: 'left',
  51. 51              component: {
  52. 52                module: 'a-baselayout',
  53. 53                name: 'listLayoutTableCellUserName',
  54. 54              },
  55. 55            },
  56. 56            {
  57. 57              dataIndex: 'createdAt',
  58. 58              title: 'Created Time',
  59. 59              align: 'left',
  60. 60            },
  61. 61            {
  62. 62              dataIndex: 'updatedAt',
  63. 63              title: 'Modification Time',
  64. 64              align: 'left',
  65. 65            },
  66. 66          ],
  67. 67        },
  68. 68      },
  69. 69    },
  70. 70  },
  71. 71};
  72. 72export default list;

关于JSON配置的具体说明，请参见：原子列表布局：默认布局