2. 如何制作表格

步骤详解

拖入组件

一个常见的表格页面会包含查询框、表格和分页按钮。这些都在 Fusion UI 中进行了相应的封装，我们可以在左侧组件面板处找到他们。

将他们拖到画布之中：

配置组件

选中刚拖入的“查询筛选”组件，您可以配置此组件：

对于形如 Array 的配置项目，我们可以增删项目、修改常用项、修改顺序。

掌握组件配置功能，我们就可以完成一个常用的查询框的配置：

绑定数据

低代码场景下，我们需要绑定动态的数据。通过左侧的源码编辑面板，我们可以创建动态数据和它的相关处理函数：

如图，我们配入如下自定义值进 state 里：

    "companies": [
      { company: '测试公司1', id: 1, createTime: +new Date() },
      { company: '测试公司2', id: 2, createTime: +new Date() },
      { company: '测试公司3', id: 3, createTime: +new Date() },
    ]

定义动态数据以后，我们需要绑定它到组件的属性中，我们找到相关属性的配置：

如图，输入表达式：

this.state.companies

再结合上一节的“配置组件”操作，我们已经可以把表格的主体配置出来了：

动态请求

我们进入代码区块，使用生命周期方法来完成动态数据的请求。假设提供数据的接口是：http://rap2api.taobao.org/app/mock/250089/testCompanies，那么，我们可以在源码面板进行如下配置：

class LowcodeComponent extends Component {
  state = {
    "text": "outer",
    "isShowDialog": false,
    "loading": false,
    "companies": [
      { company: '测试公司 1', id: 1, createTime: +new Date() },
      { company: '测试公司 2', id: 2, createTime: +new Date() },
      { company: '测试公司 3', id: 3, createTime: +new Date() },
    ]
  }
  componentDidMount() {
    this.setState({ loading: true })
    window.fetch('http://rap2api.taobao.org/app/mock/250089/testCompanies')
      .then((res) => res.json())
      .then((companies) => {
        this.setState({
          companies,
        })
      })
      .catch(err => console.error(err))
      .then(() => {
        this.setState({ loading: false })
      })
  }
}

在 componentDidMount 生命周期，将请求接口并设置 loading 和数据字段。

点击保存或叉关闭源码面板后，我们可以看到代码已经生效了：

配置插槽

我们可以用绑定数据的方法把 loading 绑在加载指示上：

将 Loading 的“是否显示”字段绑定 this.state.loading 后，我们可以看到，这里暴露了一个插槽。插槽是可以任意扩展的预设部分，我们可以把其他的部分拖进插槽：

点击右上角的预览，我们能够看到完整的动态请求效果了：

列挂钩浮层

为了能够让表格里的操作挂钩浮层，我们先拖入一个浮层：

使用大纲树能够临时显示和隐藏此浮层：

我们给表格增加一个数据列：

然后配置它的行为为“弹窗”：

实现的效果如下：

事件回调

上述功能点中，我们是把操作行为绑定在数据列上的，这一节我们绑定到操作列中。在操作列按钮处，点击下方的“添加一项”：

点击左侧的详情按钮，配置它的事件回调：

代码侧，我们配置这个回调函数：

onClick_new(e, { rowKey, rowIndex, rowRecord }){
  window.Next.Message.show(JSON.stringify({ rowKey, rowIndex, rowRecord }))
}

保存。预览时我们可以看到效果了：

研究本例的 schema

我们把本例的 schema 保存在云端，您可以自行下载研究：https://mo.m.taobao.com/marquex/lowcode-showcase-table

您可以通过左下角的 Schema 面板直接导入本例子的 Schema。