order: 7 group: order: 3 title: 高级用法

toc: content

列表的展示

列表的展示对于简单需求占位太多，复杂需求定制不够一直是痛点。所以我们给出了 5 种展示，充分满足从极简到复杂的所有需求。

  1. 默认展示使用 widget: ‘cardList’，卡片类型，用于展示数量不太多但结构复杂的 list
  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   properties: {
  7.     listName2: {
  8.       title: '对象数组',
  9.       description: '对象数组嵌套功能',
  10.       type: 'array',
  11.       // widget: 'cardList',
  12.       items: {
  13.         type: 'object',
  14.         properties: {
  15.           input1: {
  16.             title: '简单输入框',
  17.             type: 'string',
  18.             required: true,
  19.           },
  20.           select1: {
  21.             title: '单选',
  22.             type: 'string',
  23.             enum: ['a', 'b', 'c'],
  24.             enumNames: ['早', '中', '晚'],
  25.             default: 'a',
  26.           },
  27.           obj: {
  28.             title: '对象',
  29.             type: 'object',
  30.             properties: {
  31.               input1: {
  32.                 title: '简单输入框',
  33.                 type: 'string',
  34.                 required: true,
  35.                 default: '卡片列表',
  36.               },
  37.               select1: {
  38.                 title: '单选',
  39.                 type: 'string',
  40.                 enum: ['a', 'b', 'c'],
  41.                 enumNames: ['早', '中', '晚'],
  42.               },
  43.             },
  44.           },
  45.         },
  46.       },
  47.     },
  48.   },
  49. };
  51. const Demo = () => {
  52.   return <Form schema={schema} />;
  53. };
  55. export default Demo;



  1. widget: ‘simpleList’ 用于展示每行只有 1-3 个简单元素的情况
  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   properties: {
  7.     listName2: {
  8.       title: '对象数组',
  9.       description: '对象数组嵌套功能',
  10.       type: 'array',
  11.       widget: 'simpleList',
  12.       items: {
  13.         type: 'object',
  14.         properties: {
  15.           input1: {
  16.             title: '简单输入框',
  17.             type: 'string',
  18.             required: true,
  19.           },
  20.           select1: {
  21.             title: '单选',
  22.             type: 'string',
  23.             enum: ['a', 'b', 'c'],
  24.             enumNames: ['早', '中', '晚'],
  25.           },
  26.         },
  27.       },
  28.     },
  29.   },
  30. };
  32. const Demo = () => {
  33.   return <Form schema={schema} />;
  34. };
  36. export default Demo;



  1. widget: ‘tableList’ 用于展示每行只有 3 - n 个简单元素的情况，特别是数据量很大需要分页的
  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   properties: {
  7.     listName2: {
  8.       title: '对象数组',
  9.       description: '对象数组嵌套功能',
  10.       type: 'array',
  11.       widget: 'tableList',
  12.       items: {
  13.         type: 'object',
  14.         properties: {
  15.           input1: {
  16.             title: '简单输入框',
  17.             type: 'string',
  18.             required: true,
  19.           },
  20.           input2: {
  21.             title: '简单输入框2',
  22.             type: 'string',
  23.           },
  24.           input3: {
  25.             title: '简单输入框3',
  26.             type: 'string',
  27.           },
  28.           select1: {
  29.             title: '单选',
  30.             type: 'string',
  31.             enum: ['a', 'b', 'c'],
  32.             enumNames: ['早', '中', '晚'],
  33.             widget: 'select',
  34.           },
  35.         },
  36.       },
  37.     },
  38.   },
  39. };
  41. const Demo = () => {
  42.   return <Form schema={schema} />;
  43. };
  45. export default Demo;



  1. widget: ‘drawerList’ 用于展示存在列表套列表，列表套对象等复杂元素的情况
  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   properties: {
  7.     listName2: {
  8.       title: '对象数组',
  9.       description: '对象数组嵌套功能',
  10.       type: 'array',
  11.       widget: 'drawerList',
  12.       items: {
  13.         type: 'object',
  14.         properties: {
  15.           input1: {
  16.             title: '简单输入框',
  17.             type: 'string',
  18.             required: true,
  19.           },
  20.           select1: {
  21.             title: '单选',
  22.             type: 'string',
  23.             enum: ['a', 'b', 'c'],
  24.             enumNames: ['早', '中', '晚'],
  25.           },
  26.           listName2: {
  27.             title: '对象数组',
  28.             description: '对象数组嵌套功能',
  29.             type: 'array',
  30.             widget: 'simpleList',
  31.             props: {
  32.               hideMove: true,
  33.             },
  34.             items: {
  35.               type: 'object',
  36.               properties: {
  37.                 input1: {
  38.                   title: '简单输入框',
  39.                   type: 'string',
  40.                   required: true,
  41.                 },
  42.                 select1: {
  43.                   title: '单选',
  44.                   type: 'string',
  45.                   enum: ['a', 'b', 'c'],
  46.                   enumNames: ['早', '中', '晚'],
  47.                 },
  48.               },
  49.             },
  50.           },
  51.         },
  52.       },
  53.     },
  54.   },
  55. };
  57. const Demo = () => {
  58.   return <Form schema={schema} />;
  59. };
  61. export default Demo;



  1. widget: ‘tabList’ 用于展示可新增/关闭页签的 Tabs 标签页
  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   properties: {
  7.     tabsName1: {
  8.       title: '对象数组',
  9.       description: '对象数组嵌套功能',
  10.       type: 'array',
  11.       widget: 'tabList',
  12.       props: {
  13.         type: 'editable-card',
  14.         tabName: '项目', // 选项卡显示文字，对应antd中Tabs的tab属性。 这里也可以是数组
  15.         draggable: true, //  是否可拖拽
  16.       },
  17.       items: {
  18.         type: 'object',
  19.         properties: {
  20.           input1: {
  21.             title: '简单输入框',
  22.             type: 'string',
  23.             required: true,
  24.           },
  25.           select1: {
  26.             title: '单选',
  27.             type: 'string',
  28.             enum: ['a', 'b', 'c'],
  29.             enumNames: ['早', '中', '晚'],
  30.           },
  31.           listName1: {
  32.             title: '对象数组',
  33.             type: 'array',
  34.             widget: 'list1',
  35.             props: {
  36.               hideMove: true,
  37.             },
  38.             items: {
  39.               type: 'object',
  40.               properties: {
  41.                 input1: {
  42.                   title: '简单输入框',
  43.                   type: 'string',
  44.                   required: true,
  45.                 },
  46.                 select1: {
  47.                   title: '单选',
  48.                   type: 'string',
  49.                   enum: ['a', 'b', 'c'],
  50.                   enumNames: ['早', '中', '晚'],
  51.                 },
  52.               },
  53.             },
  54.           },
  55.         },
  56.       },
  57.     },
  58.   },
  59. };
  61. const Demo = () => <Form schema={schema} />;
  62. export default Demo;



  1. widget: ‘virtualList’ 在展示上与 ‘tableList’ 基本相同，但以虚拟滚动替代了传统的分页
  1. import React from 'react';
  2. import Form from '../demo/display';
  4. const schema = {
  5.   type: 'object',
  6.   properties: {
  7.     listName2: {
  8.       title: '对象数组',
  9.       description: '对象数组嵌套功能',
  10.       type: 'array',
  11.       widget: 'virtualList',
  12.       itemProps: {
  13.         buttons: [
  14.           {
  15.             callback: 'hello',
  16.             text: '复制',
  17.           },
  18.         ],
  19.       },
  20.       items: {
  21.         type: 'object',
  22.         properties: {
  23.           input1: {
  24.             title: '简单输入框',
  25.             type: 'string',
  26.             required: true,
  27.           },
  28.           input2: {
  29.             title: '简单输入框2',
  30.             type: 'string',
  31.           },
  32.           input3: {
  33.             title: '简单输入框3',
  34.             type: 'string',
  35.           },
  36.           select1: {
  37.             title: '单选',
  38.             type: 'string',
  39.             enum: ['a', 'b', 'c'],
  40.             enumNames: ['早', '中', '晚'],
  41.             widget: 'select',
  42.           },
  43.         },
  44.       },
  45.     },
  46.   },
  47. };
  49. const Demo = () => {
  50.   return <Form schema={schema} />;
  51. };
  53. export default Demo;