List 列表

基础用法

纯列表，数据是通过data静态配置的

List 列表 - 图1

  1. {
  2.   "type": "list",
  3.   "resource": {
  4.     "fields": {
  5.       "text": {
  6.         "label": "文本",
  7.         "type": "text"
  8.       },
  9.       "inputnumber": {
  10.         "type": "inputnumber",
  11.         "label": "数字输入"
  12.       },
  13.       "select": {
  14.         "type": "select",
  15.         "label": "select多选",
  16.         "props": {
  17.           "options": {
  18.             "a": "黄金糕",
  19.             "b": "双皮奶",
  20.             "c": "蚵仔煎",
  21.             "d": "龙须面",
  22.             "e": "北京烤鸭"
  23.           }
  24.         }
  25.       }
  26.     }
  27.   },
  28.   "data": {
  29.     "list": [{
  30.       "text": "双11活动",
  31.       "inputnumber": 3,
  32.       "select": "a,b,c"
  33.     }, {
  34.       "text": "双11活动2",
  35.       "inputnumber": 4,
  36.       "select": "b,c"
  37.     }, {
  38.       "text": "双11活动3",
  39.       "inputnumber": 5,
  40.       "select": "a,b,c"
  41.     }, {
  42.       "text": "双11活动4",
  43.       "inputnumber": 6,
  44.       "select": "c"
  45.     }]
  46.   }
  47. }

显示配置

索引行号0.9.1+

通过设置props.type: 'index' 可以实现在每行显示索引行号。

List 列表 - 图2

  1. {
  2.   "type": "list",
  3.   "resource": {
  4.     "fields": {
  5.       "text": {
  6.         "label": "文本",
  7.         "type": "text"
  8.       },
  9.       "inputnumber": {
  10.         "type": "inputnumber",
  11.         "label": "数字输入"
  12.       },
  13.       "select": {
  14.         "type": "select",
  15.         "label": "select多选",
  16.         "props": {
  17.           "options": {
  18.             "a": "黄金糕",
  19.             "b": "双皮奶",
  20.             "c": "蚵仔煎",
  21.             "d": "龙须面",
  22.             "e": "北京烤鸭"
  23.           }
  24.         }
  25.       }
  26.     }
  27.   },
  28.   "data": {
  29.     "list": [{
  30.       "text": "双11活动",
  31.       "inputnumber": 3,
  32.       "select": "a,b,c"
  33.     }, {
  34.       "text": "双11活动2",
  35.       "inputnumber": 4,
  36.       "select": "b,c"
  37.     }, {
  38.       "text": "双11活动3",
  39.       "inputnumber": 5,
  40.       "select": "a,b,c"
  41.     }, {
  42.       "text": "双11活动4",
  43.       "inputnumber": 6,
  44.       "select": "c"
  45.     }]
  46.   },
  47.   "props": {
  48.     "type": "index"
  49.   }
  50. }

显示配置

带分页的列表

是否显示分页由列表接口返回的total字段决定，当接口没有返回该字段或者该字段返回0，则不显示分页。如果不需要分页的场景可以利用此特性。分页时默认是20条一页，可通过pageSize和接口配合来改变。

另外，数据如果是通过接口获取，记得主动在 events 里的 init 调一下 @list

List 列表 - 图3

  1. {
  2.   "type": "list",
  3.   "resource": {
  4.     "api": {
  5.       "prefix": "https://easy-mock.com/mock/5a0023effbbb09615044cb82/",
  6.       "list": "smallList",
  7.       "successCode": 0
  8.     },
  9.     "fields": {
  10.       "id": {
  11.         "type": "text",
  12.         "label": "ID",
  13.         "props": {
  14.           "width": 50
  15.         }
  16.       },
  17.       "testText": {
  18.         "type": "text",
  19.         "label": "名称"
  20.       },
  21.       "testTextarea": {
  22.         "type": "textarea",
  23.         "label": "文本框"
  24.       },
  25.       "testDate": {
  26.         "type": "datetime",
  27.         "label": "创建时间"
  28.       },
  29.       "testSwitch": {
  30.         "type": "switch",
  31.         "label": "开关"
  32.       }
  33.     }
  34.   },
  35.   "events": {
  36.     "init": "@list"
  37.   }
  38. }

显示配置

表头带排序和筛选的列表

这两个功能是通过接口来实现真实排序和筛选的，下面例子是模拟接口，看不到排序和筛选后的效果。

配置在 sorts 内的字段可以支持排序，排序变更时会触发 list action并携带对应的排序参数。

配置在 filters 内的字段可以支持过滤，可以通过 multiple 控制是否支持多选，如果 remote 配置为false、则会使用默认的字符串过滤并且不会请求接口（如果要自定本地过滤请使用props透传），当 remote 为true时，选择的过滤结果将携带在参数上并会发起新的请求刷新列表。

如果没有配置会使用同名 field 的 props.options 配置，如果都没有filter配置会失效

List 列表 - 图4

  1. {
  2.   "type": "list",
  3.   "resource": {
  4.     "api": {
  5.       "prefix": "https://easy-mock.com/mock/5a0023effbbb09615044cb82/",
  6.       "list": "smallList",
  7.       "successCode": 0
  8.     },
  9.     "fields": {
  10.       "id": {
  11.         "type": "text",
  12.         "label": "ID",
  13.         "props": {
  14.           "width": 100
  15.         }
  16.       },
  17.       "testSelect": {
  18.         "type": "select",
  19.         "label": "select多选",
  20.         "props": {
  21.           "options": {
  22.             "a": "黄金糕",
  23.             "b": "双皮奶",
  24.             "c": "蚵仔煎",
  25.             "d": "龙须面",
  26.             "e": "北京烤鸭"
  27.           }
  28.         }
  29.       },
  30.       "testText": {
  31.         "type": "text",
  32.         "label": "名称"
  33.       },
  34.       "testTextarea": {
  35.         "type": "textarea",
  36.         "label": "文本框"
  37.       },
  38.       "testDate": {
  39.         "type": "datetime",
  40.         "label": "创建时间"
  41.       }
  42.     }
  43.   },
  44.   "filters": {
  45.     "testSelect": {
  46.       "multiple": true,
  47.       "remote": true
  48.     }
  49.   },
  50.   "sorts": {
  51.     "id": true
  52.   },
  53.   "events": {
  54.     "init": "@list"
  55.   }
  56. }

显示配置

搜索配置 0.5.0+

注意：在 ams@0.5.0 以前的版本是通过配置 searchs 和 searchsOptions 实现的搜索配置，0.5.0+ 使用新的operations + slot 实现列表的搜索和多选配置（0.5.0-0.6.0 会兼容searchs和searchsOptions，将在0.6.0+移除兼容支持）

通过配置slot为searchs可以配置搜索条件，operations 配置参考：operations配置

List 列表 - 图5

  1. {
  2.   "type": "list",
  3.   "resource": {
  4.     "api": {
  5.       "prefix": "https://easy-mock.com/mock/5a0023effbbb09615044cb82/",
  6.       "list": "smallList",
  7.       "successCode": 0
  8.     },
  9.     "fields": {
  10.       "id": {
  11.         "type": "text",
  12.         "label": "ID"
  13.       },
  14.       "testSelect": {
  15.         "type": "select",
  16.         "label": "select多选",
  17.         "props": {
  18.           "options": {
  19.             "a": "黄金糕",
  20.             "b": "双皮奶",
  21.             "c": "蚵仔煎",
  22.             "d": "龙须面",
  23.             "e": "北京烤鸭"
  24.           }
  25.         }
  26.       },
  27.       "testText": {
  28.         "type": "text",
  29.         "label": "名称",
  30.         "props": {
  31.           "placeholder": "请输入名词"
  32.         }
  33.       }
  34.     }
  35.   },
  36.   "data": {
  37.     "list": [{
  38.       "id": 3,
  39.       "testText": "双11活动",
  40.       "testSelect": "a,b,c"
  41.     }, {
  42.       "id": 4,
  43.       "testText": "双11活动2",
  44.       "testSelect": "b,c"
  45.     }, {
  46.       "id": 5,
  47.       "testText": "双11活动3",
  48.       "testSelect": "a,b,c"
  49.     }, {
  50.       "id": 6,
  51.       "testText": "双11活动4",
  52.       "testSelect": "c"
  53.     }]
  54.   },
  55.   "operations": {
  56.     "testText": {
  57.       "slot": "searchs",
  58.       "type": "field",
  59.       "label": "名称"
  60.     },
  61.     "testSelect": {
  62.       "slot": "searchs",
  63.       "type": "field",
  64.       "label": "类型"
  65.     },
  66.     "search": {
  67.       "slot": "searchs",
  68.       "type": "button",
  69.       "props": {
  70.         "type": "primary"
  71.       },
  72.       "label": "搜索",
  73.       "event": "list:1"
  74.     }
  75.   }
  76. }

显示配置

多选操作配置 0.5.0+

通过配置list 的 options.multipleSelect 为 true 时可让列表出现多选按钮，配置 slot 为 multipleSelect 可以配置多选后出现的操作（多选操作只有在选择了至少一行后才会出现），operations 配置参考：operations配置

List 列表 - 图6

  1. {
  2.   "type": "list",
  3.   "resource": {
  4.     "fields": {
  5.       "id": {
  6.         "type": "text",
  7.         "label": "ID"
  8.       },
  9.       "testSelect": {
  10.         "type": "select",
  11.         "label": "select多选",
  12.         "props": {
  13.           "options": {
  14.             "a": "黄金糕",
  15.             "b": "双皮奶",
  16.             "c": "蚵仔煎",
  17.             "d": "龙须面",
  18.             "e": "北京烤鸭"
  19.           }
  20.         }
  21.       },
  22.       "testText": {
  23.         "type": "text",
  24.         "label": "名称",
  25.         "props": {
  26.           "placeholder": "请输入名词"
  27.         }
  28.       }
  29.     }
  30.   },
  31.   "data": {
  32.     "list": [{
  33.       "id": 3,
  34.       "testText": "双11活动",
  35.       "testSelect": "a,b,c"
  36.     }, {
  37.       "id": 4,
  38.       "testText": "双11活动2",
  39.       "testSelect": "b,c"
  40.     }, {
  41.       "id": 5,
  42.       "testText": "双11活动3",
  43.       "testSelect": "a,b,c"
  44.     }, {
  45.       "id": 6,
  46.       "testText": "双11活动4",
  47.       "testSelect": "c"
  48.     }],
  49.     "total": 100
  50.   },
  51.   "options": {
  52.     "multipleSelect": true
  53.   },
  54.   "operations": {
  55.     "selectMulti": {
  56.       "slot": "multipleSelect",
  57.       "type": "field",
  58.       "field": "testSelect"
  59.     },
  60.     "buttonMulti": {
  61.       "slot": "multipleSelect",
  62.       "type": "button",
  63.       "label": "删除",
  64.       "event": "multi"
  65.     }
  66.   },
  67.   "actions": {
  68.     "multi": function(e) {
  69.       this.$message("你点击了删除按钮！"), console.log("multipleSelect action", e.$prevReturn)
  70.     }
  71.   }
  72. }

显示配置

slotBlocks 插槽配置

  • 搜索条顶部：配置子block的slot为top，可以插入到搜索条顶部

  • 搜索条和表格之间：配置子block的slot为tableTop，可以插入到搜索条和表格之间

List 列表 - 图7

  1. {
  2.   "type": "list",
  3.   "resource": {
  4.     "fields": {
  5.       "id": {
  6.         "type": "text",
  7.         "label": "ID"
  8.       },
  9.       "testSelect": {
  10.         "type": "select",
  11.         "label": "select多选",
  12.         "props": {
  13.           "options": {
  14.             "a": "黄金糕",
  15.             "b": "双皮奶",
  16.             "c": "蚵仔煎",
  17.             "d": "龙须面",
  18.             "e": "北京烤鸭"
  19.           }
  20.         }
  21.       },
  22.       "testText": {
  23.         "type": "text",
  24.         "label": "名称",
  25.         "props": {
  26.           "placeholder": "请输入名词"
  27.         }
  28.       }
  29.     }
  30.   },
  31.   "data": {
  32.     "list": [{
  33.       "id": 3,
  34.       "testText": "双11活动",
  35.       "testSelect": "a,b,c"
  36.     }, {
  37.       "id": 4,
  38.       "testText": "双11活动2",
  39.       "testSelect": "b,c"
  40.     }, {
  41.       "id": 5,
  42.       "testText": "双11活动3",
  43.       "testSelect": "a,b,c"
  44.     }, {
  45.       "id": 6,
  46.       "testText": "双11活动4",
  47.       "testSelect": "c"
  48.     }],
  49.     "total": 100
  50.   },
  51.   "operations": {
  52.     "testText": {
  53.       "slot": "searchs",
  54.       "type": "field"
  55.     },
  56.     "search": {
  57.       "slot": "searchs",
  58.       "type": "button",
  59.       "props": {
  60.         "type": "primary"
  61.       },
  62.       "label": "搜索",
  63.       "event": "list:1"
  64.     }
  65.   },
  66.   "blocks": {
  67.     "listTop": {
  68.       "type": "component",
  69.       "options": {
  70.         "is": "div",
  71.         "text": "我是列表区块最顶部的插槽内容！！"
  72.       },
  73.       "style": {
  74.         "padding": "20px",
  75.         "marginBottom": "20px",
  76.         "border": "1px solid #3eaf7c"
  77.       },
  78.       "slot": "top"
  79.     },
  80.     "listTableTop": {
  81.       "type": "component",
  82.       "options": {
  83.         "is": "div",
  84.         "text": "我是列表区块表格顶部的插槽内容！！"
  85.       },
  86.       "style": {
  87.         "padding": "20px",
  88.         "border": "1px solid #f60"
  89.       },
  90.       "slot": "tableTop"
  91.     }
  92.   }
  93. }

显示配置

列表每行操作项

List 列表 - 图8

  1. {
  2.   "type": "list",
  3.   "resource": {
  4.     "fields": {
  5.       "text": {
  6.         "label": "文本",
  7.         "type": "text"
  8.       },
  9.       "inputnumber": {
  10.         "type": "inputnumber",
  11.         "label": "数字输入"
  12.       },
  13.       "select": {
  14.         "type": "select",
  15.         "label": "select多选",
  16.         "props": {
  17.           "options": {
  18.             "a": "黄金糕",
  19.             "b": "双皮奶",
  20.             "c": "蚵仔煎",
  21.             "d": "龙须面",
  22.             "e": "北京烤鸭"
  23.           }
  24.         }
  25.       }
  26.     }
  27.   },
  28.   "data": {
  29.     "list": [{
  30.       "text": "双11活动",
  31.       "inputnumber": 3,
  32.       "select": "a,b,c"
  33.     }, {
  34.       "text": "双11活动2",
  35.       "inputnumber": 4,
  36.       "select": "b,c"
  37.     }, {
  38.       "text": "双11活动3",
  39.       "inputnumber": 5,
  40.       "select": "a,b,c"
  41.     }, {
  42.       "text": "双11活动4",
  43.       "inputnumber": 6,
  44.       "select": "c"
  45.     }]
  46.   },
  47.   "operations": {
  48.     "testNewInput": {
  49.       "slot": "searchs",
  50.       "type": "field",
  51.       "field": {
  52.         "type": "text",
  53.         "props": {
  54.           "placeholder": "折"
  55.         },
  56.         "style": {
  57.           "width": "100px"
  58.         }
  59.       }
  60.     },
  61.     "search": {
  62.       "slot": "searchs",
  63.       "type": "button",
  64.       "props": {
  65.         "type": "primary"
  66.       },
  67.       "label": "搜索",
  68.       "event": "list"
  69.     },
  70.     "reset": {
  71.       "slot": "searchs",
  72.       "type": "reset",
  73.       "label": "重置"
  74.     },
  75.     "addItem": {
  76.       "type": "button",
  77.       "label": "新建",
  78.       "props": {
  79.         "type": "primary"
  80.       },
  81.       "slot": "searchs"
  82.     },
  83.     "editItem": {
  84.       "type": "button",
  85.       "label": "编辑",
  86.       "props": {
  87.         "type": "primary",
  88.         "icon": "el-icon-edit"
  89.       }
  90.     },
  91.     "removeItem": {
  92.       "type": "button",
  93.       "props": {
  94.         "type": "danger",
  95.         "icon": "el-icon-delete",
  96.         "circle": true
  97.       }
  98.     }
  99.   },
  100.   "actions": {
  101.     "addItem": function() {
  102.       this.$message("这是”新建“按钮事件响应Demo效果，可在区块配置的“actions”里修改～")
  103.     },
  104.     "editItem": function() {
  105.       this.$message("这是”编辑“按钮事件响应Demo效果，可在区块配置的“actions”里修改～")
  106.     },
  107.     "removeItem": function() {
  108.       this.$message("这是”删除“按钮事件响应Demo效果，可在区块配置的“actions”里修改～")
  109.     },
  110.     "reset": function() {
  111.       this.$message("这是”重置“按钮事件响应Demo效果，可在区块配置的“actions”里修改～")
  112.     }
  113.   }
  114. }

显示配置

编辑状态的列表

  • 支持字段之间的联动：某个字段的状态根据另一个字段的取值发生变化（比如下面demo的条件字段会根据对比字段发生变化）

List 列表 - 图9

  1. {
  2.   "type": "list",
  3.   "ctx": "edit",
  4.   "props": {
  5.     "type": "index"
  6.   },
  7.   "resource": {
  8.     "fields": {
  9.       "a": {
  10.         "type": "text",
  11.         "label": "指标",
  12.         "props": {
  13.           "width": "170px"
  14.         }
  15.       },
  16.       "b": {
  17.         "type": "text",
  18.         "label": "连续次数"
  19.       },
  20.       "c1": {
  21.         "type": "unitselect",
  22.         "label": "时间段",
  23.         "units": ["分钟", "小时"],
  24.         "defaultUnit": "分钟"
  25.       },
  26.       "e": {
  27.         "type": "select",
  28.         "label": "对比",
  29.         "props": {
  30.           "multiple": false,
  31.           "options": {
  32.             "0": "昨天",
  33.             "5": "不对比"
  34.           }
  35.         }
  36.       },
  37.       "f": {
  38.         "type": "select",
  39.         "label": "条件",
  40.         "props": {
  41.           "multiple": false,
  42.           "options": {
  43.             "0": "同比下降",
  44.             "1": "同比上升"
  45.           }
  46.         },
  47.         "changeConfig": function(e, t) {
  48.           return t && "5" === t.e && (e.props.options = {
  49.             ">": ">",
  50.             ">=": ">=",
  51.             "<": "<",
  52.             "<=": "<=",
  53.             "==": "=="
  54.           }), !e.props.options[t.f] && (t.f = ""), e
  55.         }
  56.       }
  57.     }
  58.   },
  59.   "data": {
  60.     "list": [{
  61.       "a": "大促指标",
  62.       "b": "12",
  63.       "c1": "12",
  64.       "e": "0",
  65.       "f": "0"
  66.     }]
  67.   },
  68.   "operations": {
  69.     "removeItem": {
  70.       "type": "button",
  71.       "label": "删除",
  72.       "props": {
  73.         "type": "danger",
  74.         "icon": "el-icon-delete"
  75.       }
  76.     },
  77.     "addItem1": {
  78.       "type": "button",
  79.       "label": "新增规则",
  80.       "props": {
  81.         "type": "primary"
  82.       },
  83.       "slot": "searchs",
  84.       "event": "addItem"
  85.     },
  86.     "addItem2": {
  87.       "type": "button",
  88.       "label": "右上",
  89.       "props": {
  90.         "type": "primary"
  91.       },
  92.       "slot": "rightTop",
  93.       "event": "addItem"
  94.     },
  95.     "addItem3": {
  96.       "type": "button",
  97.       "label": "左下",
  98.       "props": {
  99.         "type": "primary"
  100.       },
  101.       "slot": "leftBottom",
  102.       "event": "addItem"
  103.     },
  104.     "addItem4": {
  105.       "type": "button",
  106.       "label": "右下1",
  107.       "props": {
  108.         "type": "primary"
  109.       },
  110.       "slot": "rightBottom",
  111.       "event": "addItem"
  112.     },
  113.     "addItem5": {
  114.       "type": "button",
  115.       "label": "右下2",
  116.       "props": {
  117.         "type": "primary"
  118.       },
  119.       "slot": "rightBottom",
  120.       "event": "addItem"
  121.     },
  122.     "saveItem": {
  123.       "type": "button",
  124.       "label": "保存",
  125.       "props": {
  126.         "type": "primary"
  127.       },
  128.       "slot": "searchs"
  129.     }
  130.   },
  131.   "actions": {
  132.     "addItem": function() {
  133.       this.data.list.push({
  134.         a: "",
  135.         b: "",
  136.         c1: "",
  137.         e: "",
  138.         f: ""
  139.       })
  140.     },
  141.     "saveItem": function() {
  142.       alert("你点击了保存按钮")
  143.     }
  144.   }
  145. }

显示配置

在线实验室

List 列表 - 图10

List 列表 - 图11

参数列表

参数说明可选值 | 类型必填
typeblock类型string是
datadata可以指定当前block的初始数据，结构和fields保持一致null | object否
config全局配置，和通过ams.config配置效果一致null | object否
style可以设置区块的外层样式null | object否
events可以配置对应事件的处理actionsnull | object否
actions可以配置具体的action处理函数null | object否
operations可以配置operation操作null | object否
blocks可以配置多个子blocknull | object否
render默认为false，配置为true则自动在body内渲染，如传入string则渲染在指定的querySelector上boolean | string否
props会透传至底层的element-ui组件作为props属性，或者是原生dom元素的属性null | object否
optionsblock特有配置null | object否
resource资源配置，可以通过string使用同名resource，或者直接通过object指定string | object否
fields会合并覆盖resource内的fieldsnull | object否