Table 表格

大部分功能同list一致，增加了展开行/子表、合并行、表头配置等功能

基础用法

Table 表格 - 图1

  1. {
  2.   "type": "table",
  3.   "resource": {
  4.     "api": {
  5.       "prefix": "https://easy-mock.com/mock/5bf25b2b34392218c898a5fd/",
  6.       "list": "list"
  7.     },
  8.     "fields": {
  9.       "id": {
  10.         "type": "text",
  11.         "label": "序号",
  12.         "on": {
  13.           "change": function() {
  14.             for (var e = arguments.length, a = new Array(e), t = 0; t < e; t++) a[t] = arguments[t];
  15.             console.log("text change", a, this)
  16.           }
  17.         }
  18.       },
  19.       "grade1": {
  20.         "type": "text",
  21.         "label": "一级品类",
  22.         "rules": [{
  23.           "required": true,
  24.           "message": "请输入活动名称",
  25.           "trigger": "blur"
  26.         }, {
  27.           "min": 3,
  28.           "max": 5,
  29.           "message": "长度在 3 到 5 个字符",
  30.           "trigger": "blur"
  31.         }],
  32.         "props": {
  33.           "suffix-icon": "el-icon-service"
  34.         }
  35.       },
  36.       "grade2": {
  37.         "type": "text",
  38.         "label": "二级品类"
  39.       },
  40.       "day1": {
  41.         "type": "text",
  42.         "label": "第1天"
  43.       },
  44.       "day2": {
  45.         "type": "text",
  46.         "label": "第2天"
  47.       },
  48.       "day3": {
  49.         "type": "text",
  50.         "label": "第3天"
  51.       },
  52.       "day4": {
  53.         "type": "text",
  54.         "label": "第4天"
  55.       },
  56.       "day5": {
  57.         "type": "text",
  58.         "label": "第5天"
  59.       },
  60.       "day6": {
  61.         "type": "text",
  62.         "label": "第6天"
  63.       },
  64.       "day7": {
  65.         "type": "text",
  66.         "label": "第7天"
  67.       },
  68.       "week": {
  69.         "type": "text",
  70.         "label": "前7天"
  71.       }
  72.     }
  73.   },
  74.   "ctx": "view",
  75.   "sorts": {
  76.     "id": true,
  77.     "week": true
  78.   },
  79.   "searchs": {
  80.     "id": true,
  81.     "grade1": true
  82.   },
  83.   "data": {
  84.     "list": [],
  85.     "pageSize": 10
  86.   },
  87.   "options": {
  88.     "span-merge": {
  89.       "grade1": true,
  90.       "grade2": true
  91.     },
  92.     "expand-row": {
  93.       "valueKey": "rowchildren",
  94.       "remoteConfig": {
  95.         "action": "https://easy-mock.com/mock/5bf25b2b34392218c898a5fd/table-expand",
  96.         "queryName": "chidTableId",
  97.         "queryValue": "id"
  98.       }
  99.     },
  100.     "table-column": [{
  101.       "label": "序号",
  102.       "name": "id"
  103.     }, {
  104.       "label": "",
  105.       "children": [{
  106.         "label": "一级品类",
  107.         "name": "grade1",
  108.         "slot-header": {
  109.           "type": "tooltip",
  110.           "content": "这里是一级品类信息<br/>第二行信息"
  111.         }
  112.       }, {
  113.         "label": "二级品类",
  114.         "name": "grade2",
  115.         "slot-header": {
  116.           "type": "tooltip",
  117.           "content": "这里是二级品类信息<br/>第二行信息"
  118.         }
  119.       }]
  120.     }, {
  121.       "label": "收入",
  122.       "slot-header": {
  123.         "type": "tooltip",
  124.         "content": "提示框信息<br/>第二行信息"
  125.       },
  126.       "children": [{
  127.         "label": "第1天",
  128.         "name": "day1"
  129.       }, {
  130.         "label": "第2天",
  131.         "name": "day2"
  132.       }, {
  133.         "label": "第3天",
  134.         "name": "day3"
  135.       }, {
  136.         "label": "第4天",
  137.         "name": "day4"
  138.       }, {
  139.         "label": "第5天",
  140.         "name": "day5"
  141.       }, {
  142.         "label": "第6天",
  143.         "name": "day6"
  144.       }, {
  145.         "label": "第7天",
  146.         "name": "day7"
  147.       }, {
  148.         "label": "前7天",
  149.         "name": "week",
  150.         "slot-header": {
  151.           "type": "collapse",
  152.           "collapseColumn": ["day1", "day2", "day3", "day4", "day5", "day6", "day7"]
  153.         }
  154.       }]
  155.     }]
  156.   },
  157.   "on": {
  158.     "cell-click": function(e, a, t, l) {},
  159.     "header-click": function(e, a) {}
  160.   },
  161.   "events": {
  162.     "init": "@list"
  163.   }
  164. }

显示配置

结构

  1. export interface Data { [field: string]: any }
  2. export interface FormBlock {
  3.     type: 'table',
  4.     resource: string,
  5.     ctx: 'edit' | 'view',
  6.     pageSize?: number,
  7.     filters?: { [field: string]: {
  8.       multiple?: boolean,
  9.       remote?: boolean
  10.     }},
  11.     fields?: { [field: string]: Data | false },
  12.     sorts?: { [field: string]: boolean },
  13.     style?: Data,
  14.     data?: Data,
  15.     events?: Data,
  16.     actions?: { [field: string]: () => any },
  17.     options?: Data,
  18.     operations?: { [field: string]: Data },
  19.     render?: boolean | string
  20. }

配置

可用配置项表

参数类型是否必填说明
typestring是block类型，固定值为table
resourcestring否指定resource
ctxstring否表单的显示类型
styleobject否block添加样式
dataobject否block为table时，参考list的data数据要求，详见data
eventsobject否事件定义
actionsobject否自定义actions，可被events中使用
fieldsobject否block级别作用域的fields，重置resource中的默认配置
optionsobject是table配置,内有span-merge、expand-row、table-column配置
expand-rowobject否展开行/子表配置
span-mergeobject否合并行配置，设置对应的行的field为true, 自动合并相同行表格
table-columnarray否表头配置, 数组格式，多级表头用children嵌套
operationsobject否操作项配置
blocksobject否嵌套的blocks
renderbooleanstring指定渲染方式
filtersobject否过滤条件 同列表
sortsobject否列表排序设置 同列表
searchsobject否列表搜索设置 同列表
searchsOptionsobject否列表的搜索栏操作项设置 同列表
pageSizenumber否设置分页每页的条数 同列表