跳到主要内容

# 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。