FormMaking表单设计器V3.8发布,数据表格上线,支持多选、多级表头、列模板自定义、操作列、分页等设置

介绍

FormMaking 是基于Vue的可视化表单设计器,赋能企业实现可视化低代码开发模式;帮助开发者从传统枯燥的表单代码中解放出来,更多关注业务,快速提高效率,节省研发成本。 目前已经在OA系统、考试系统、报表系统、流程管理等众多项目中得到了广泛使用。

FormMaking 采用 VueElement 进行页面构建,内置i18n 国际化解决方案,支持二次扩展开发,支持自定义组件扩展,目前支持渲染 ElementAntd 组件库。

直观的拖拽操作

FormMaking 通过可视化拖拽来创建表单,方便易用。

丰富的表单字段

FormMaking 提供了各种类型的表单字段,包括布局、容器、文本、选择框、对话框、数据表格、自定义等,基本可以满足各种场景下的复杂表单创建。

FormMaking 除了可以使用内置的字段,还支持将自己的组件引入到设计器中进行配置使用。

响应式设计

FormMaking 的表单是全响应式的,可以在任何设备上,如桌面,平板电脑或者智能手机上很好的适配。

数据源管理

FormMaking 可以对表单使用的数据进行管理,方便进行前后的数据交互。

表单事件交互

FormMaking 可以通过事件配置,完成表单复杂的业务逻辑操作。

可扩展性

FormMaking 还具有易用性和可扩展性,可以根据自己的需求,轻松地扩展您的表单功能。提供了全面的API文档,帮助您快速接入您的系统,从而更好地满足您的业务需求。

数据表格

新版本迎来了数据表格,为表单提供了更好的数据列表的处理能力,支持多选、多级表头、列模板自定义、操作列、分页等设置;接下来一起看看数据表格的功能。

表格列设置

字段属性 - 列设置中进行表格列设置。

多级表头

在列设置中添加多级表头。

自定义列

在列设置中点击每项前方的编辑按钮,即可弹出详细的编辑区域,对表格列进行更加详细的设置,包括列宽、对齐方式、列模板等。

添加操作列

操作列设置中打开显示操作列,配置操作按钮,点击编辑图标可对事件进行编辑。

方法中可以通过 arguments[0] 获取到当前行数据进行操作:

function () {
  const {
    row // 点击当前行的操作按钮,获取当前行的数据。
  } = arguments[0]
}

分页

数据结构配置

启用分页后,数据需要按照配置的数据结构进行返回,不然分页会不起作用。

需要的返回数据结构如下:

{
    "records": [...],
    "total": 100,
    "currentPage": 1,
    "pageSize": 10
}

分页事件配置

在动作设置中配置 onPageChange 事件,在当前页或者每页数量修改时会触发该事件,并且传递页面分页参数:

function () {
  const {
    pageSize, // 数据结构中配置的每页数量参数
    currentPage // 数据结构中配置的当前页参数
  } = arguments[0]
}

数据 CRUD

通过数据表格可以简单快速的完成数据CRUD操作:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容