配置一个列表
所有文档

          爱速搭·应用智能搭建平台

          配置一个列表

          该篇文档介绍如何配置通过接口展示一个表格组件。

          添加「增删改查」组件

          进入页面的可视化编辑器界面,点击加号,新增组件:

          image.png

          选择「增删改查」组件:

          image.png

          进入快速构建,可以快速编辑要展示的列:

          image.png

          每列所配置属性作用分别是:

          1. 设置表头显示字段
          2. 该列绑定行数据中字段的 key
          3. 选择列展示的类型

          我们这里创建三列,分别是:「ID」列(绑定行数据 id 字段)、「姓名」列(绑定行数据 name 字段)、「邮箱」列(绑定行数据 email 字段)。

          image.png

          点击确认后,编辑界面可以看到如下效果:

          image.png

          基本的组件结构已经准备好了,现在我们需要准备数据

          准备数据接口

          准备好一个可用的数据接口,该数据接口返回的数据格式要求如下:

          {
            "status": 0,
            "msg": "",
            "data": {
              "items": [
                {
                  // 每一行的数据
                  "id": 1,
                  "xxx": "xxxx"
                }
              ],
          
              "count": 200 // 注意!!!这里不是当前请求返回的 items 的长度,而是数据库中一共有多少条数据,用于生成分页组件
            }
          }
          • itemsrows:用于返回数据源数据,格式是数组
          • count: 用于返回数据库中一共有多少条数据,用于生成分页

          例如如上,我们配置的表格,我们需要返回的数据结构是:

          {
            "status": 0,
            "msg": "",
            "data": {
              "items": [
                {
                  "id": 1,
                  "name": "张三",
                  "email": "zhangsan@baidu.com"
                },
                {
                  "id": 2,
                  "name": "李四",
                  "email": "lisi@baidu.com"
                }
              ],
              "count": 2
            }
          }

          绑定数据接口

          在编辑器左侧大纲中,选中「增删改查」组件,切换至「接口」标签,将准备好的数据接口,填入到「数据拉取接口」配置中:

          image.png

          点击预览可以看到已经可以顺利渲染出列表页了。

          image.png

          上一篇
          配置一个表单
          下一篇
          API