表单设计器高级功能展示，导入自定义组件，可视化配置组件的事件

本文我们将介绍如何使用 FormMaking 表单设计器来引入自己的高级组件，并可以通过设计器进行配置，处理事件等操作。

封装分页数据表格组件

我们将封装 一个分页数据表格组件，组件采用 ElementPlus TableV2 。

引入到设计器

注册组件

首先应该在自己项目中进行组件的注册。

import CustomPaginationTable from 'PaginationTable.vue'

app.use(FormMakingV3, {
  components: [{
    name: 'custom-pagination-table',
    component: CustomPaginationTable // 自定义组件
  }]
})

也可以使用Vue.component 进行组件的注册

app.component('custom-pagination-table', CustomPaginationTable)

设计器配置

然后在自定义字段中就展示出来了

image.png

配置组件表格

表格列配置

在字段属性中对扩展属性配置 进行设置

image.png

image.png

数据加载

数据加载的 on-load事件，我们在自定义组件中通过emit抛出到设计器中进行配置，在字段属性-动作设置中添加onLoad事件配置如下：

image.png

效果展示

我们来查看下最后的效果

image.png