步骤详解
拖入组件
一个常见的表格页面会包含查询框、表格和分页按钮。这些都在 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。