分页数据列表配置解析

本文将介绍如何通过子表单来配置一个通用的数据列表页，从模板中导入官方提供的例子：

先看一下效果：

一个最基础的列表页就创建完成了，包括了查询，分页，列表数据的操作功能，下面我们来对此进行详细的解析。

列表配置

使用子表单和文字字段实现列表的数据展示。

操作列使用自定义组件字段，实现了编辑和删除按钮展示。

这里的事件配置triggerEvent在后面会进行详细介绍。

使用分页字段进行列表的分页，没有采用子表单自带的分页是因为我们只需要获取一页数据进行展示，子表单只需要绑定一页数据。

自定义组件事件配置

在自定义组件模板中，可以通过triggerEvent方法调用表单动作面板中的事件。
triggerEvent(eventName, args)
eventName: 事件名称。
args: 事件参数，在动作设置面板中可以通过 const {$eventArgs} = arguments[0]获取。

数据加载

可以通过数据源来指定后端请求接口，返回数据后进行列表加载，下面我们通过模拟数据来替代后端请求数据。

function loadDataList () {
  // 分页组件当前页数据
  const {currentPage} = arguments[0]
  // 模拟数据
  let listdata = Array.from({length: 10}).map((_, index) => {
    let row = (currentPage - 1) * 10 + index + 1
    return {
      id: row,
      name: 'Tom' + row,
      state: 'California' + row,
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036'
    }
  })
  // 给列表赋值
  this.setData({
    list: listdata
  })
  // 修改分页组件 total
  this.setOptions(['currentPage'], {
    total: 100
  })
}

查询按钮方法：

const currentPage = 1
this.setData({
  currentPage: 1
})
// 调用 loadDataList 方法加载数据并给列表赋值
this.triggerEvent('loadDataList', {
  currentPage
})

页数改变方法：

const {value} = arguments[0]
this.triggerEvent('loadDataList', {
  currentPage: value
})