lowform低代码表单设计器，让表单设计更简单

介绍

lowform是一个基于Vue3，Vite，TypeScript，Element-Plus 等技术栈开发的，适用于低代码或无代码开发平台的表单设计器。 让普通人也能通过简单配置快速搭建表单。

• 文档
• 在线预览
• 成品案例

示例图

项目源码

	源码地址
github	https://github.com/tsai996/lowform
码云	https://gitee.com/cai_xiao_feng/lowform

支持组件

组件	状态
输入框	✅
多行输入框	✅
数值输入框	✅
下拉框	✅
单选框	✅
多选框	✅
开关	✅
日期选择	✅
日期范围	✅
时间选择	✅
时间范围	✅
评分	✅
滑块	✅
文件上传	✅
取色器	✅
穿梭框	✅
标签页	✅
折叠面板	✅
分栏布局	✅
卡片	✅
按钮	✅
提示	✅
分割线	✅

组件联动

组件联动是指当一个组件（组件A）触发某个事件时，另一个组件（组件B）的状态会根据特定条件发生改变。以下是一个请假案例的示例：

1. 示例场景

当请假类型为事假时，请假原因字段为必填；否则，请假原因字段为非必填。

2. 代码实现

通过监听组件A（请假类型）的值变化，动态设置组件B（请假原因）的必填状态。以下为代码示例：

const {getField} = $inject
const yy = getField('field_h75fl')
const value = event[0]
if(value == 2){
  yy.required = true
}else{
  yy.required = false
}

代码说明

1. getField：用于获取表单中指定字段的组件对象。
2. event[0]：表示组件A（请假类型）的当前值。
3. 条件判断：如果组件A的值为 2（代表“事假”），则将组件B（请假原因）的 required 属性设置为 true，否则设置为 false。

3. 完整案例

请前往 在线预览 ，案例/组件联动/请假，查看完整案例。

动态计算

动态计算是指组件B的值由其他组件的值通过计算得到。 这种机制常用于表单中需要根据用户输入动态更新某些字段的场景。以下是两个典型示例：

1. 示例1：订单总价格

订单总价格由单价乘以数量得到。 实现逻辑

• 监听单价和数量字段的值变化。
• 当任一字段的值发生变化时，重新计算总价格并更新到总价格字段。

代码示例：

const { gformData } = $inject;
const unitPrice = formData.unitPrice || 0;
const quantity = formData.quantity || 0;
formData.totalPrice = unitPrice * quantity;

2. 示例2：请假时长

以下是一个完整的请假时长动态计算示例：

实现逻辑

• 监听请假时间字段的值变化。
• 当请假时间的值发生变化时，计算时间差并转换为天数，更新到请假时长字段。

代码示例：

const {getField,formData} = $inject
const value = event[0]
const timestamp = new Date(value[1]).getTime() - new Date(value[0]).getTime()
formData.field_ykkfx = timestamp /1000/60/60/24

3. 完整示例

请前往 在线预览 ，案例/组件联动/请假，查看完整案例。