前言

经过几个月的构思与挣扎，终于把低代码平台的表格与列表的CRUD部分撸出来了，废话不多说，一起来看看吧：

为便于大家理解，接下来我分几个部分来介绍低代码：

1、拖拉拽组件生成表单

2、输出表单json串

3、配置表单

4、配置列表

5、配置菜单

6、列表数据的展示以及增删改查

一、生成表单

这里引入的是VFROM的表单设计器和渲染器，具体使用方式可以网上查一下VFROM表单设计器，根据业务需求拖拉拽生成一个个人简历的表单

二、配置表单

点击导出按钮，将json串复制出来，创建表单时作为json字符串输入，用于后续渲染表单

{

"widgetList": [

{

"type": "input",

"icon": "text-field",

"formItemFlag": true,

"options": {

"name": "input111043",

"label": "姓名",

"labelAlign": "label-center-align",

"type": "text",

"defaultValue": "",

"placeholder": "",

"columnWidth": "200px",

"size": "",

"labelWidth": null,

"labelHidden": false,

"readonly": false,

"disabled": false,

"hidden": false,

"clearable": true,

"showPassword": false,

"required": true,

"requiredHint": "",

"validation": "",

"validationHint": "",

"customClass": [],

"labelIconClass": null,

"labelIconPosition": "rear",

"labelTooltip": null,

"minLength": null,

"maxLength": null,

"showWordLimit": false,

"prefixIcon": "",

"suffixIcon": "",

"appendButton": false,

"appendButtonDisabled": false,

"buttonIcon": "el-icon-search",

"onCreated": "",

"onMounted": "",

"onInput": "",

"onChange": "",

"onFocus": "",

"onBlur": "",

"onValidate": ""

},

"id": "input111043"

},

{

"type": "number",

"icon": "number-field",

"formItemFlag": true,

"options": {

"name": "number84077",

"label": "年龄",

"labelAlign": "label-center-align",

"defaultValue": 0,

"placeholder": "",

"columnWidth": "200px",

"size": "",

"labelWidth": null,

"labelHidden": false,

"disabled": false,

"hidden": false,

"required": true,

"requiredHint": "",

"validation": "",

"validationHint": "",

"customClass": [],

"labelIconClass": null,

"labelIconPosition": "rear",

"labelTooltip": null,

"min": -100000000000,

"max": 100000000000,

"precision": 0,

"step": 1,

"controlsPosition": "right",

"onCreated": "",

"onMounted": "",

"onChange": "",

"onFocus": "",

"onBlur": "",

"onValidate": ""

},

"id": "number84077"

},

{

"type": "textarea",

"icon": "textarea-field",

"formItemFlag": true,

"options": {

"name": "textarea99146",

"label": "简介",

"labelAlign": "label-center-align",

"rows": 3,

"defaultValue": "",

"placeholder": "简单介绍下自己吧~",

"columnWidth": "200px",

"size": "",

"labelWidth": null,

"labelHidden": false,

"readonly": false,

"disabled": false,

"hidden": false,

"required": true,

"requiredHint": "",

"validation": "",

"validationHint": "",

"customClass": [],

"labelIconClass": null,

"labelIconPosition": "rear",

"labelTooltip": null,

"minLength": null,

"maxLength": null,

"showWordLimit": false,

"onCreated": "",

"onMounted": "",

"onInput": "",

"onChange": "",

"onFocus": "",

"onBlur": "",

"onValidate": ""

},

"id": "textarea99146"

}

],

"formConfig": {

"modelName": "formData",

"refName": "vForm",

"rulesName": "rules",

"labelWidth": 80,

"labelPosition": "left",

"size": "",

"labelAlign": "label-left-align",

"cssCode": "",

"customClass": "",

"functions": "",

"layoutType": "PC",

"onFormCreated": "",

"onFormMounted": "",

"onFormDataChange": "",

"jsonVersion": 3,

"onFormValidate": ""

}

}

三、配置表单

创建一个表单，填写相关信息，将上一步导出的json串复制到新增页面的最后一个json串字段后，点击保存按钮，生成对应的表格对象

打开该表单页面地址可以看到如下：

四、配置列表

表单生成完成后，需要创建一个列表配置；将该表单通过了列表的形式挂载为一个菜单

[{

key: '1',

label: '创建人',

prop: 'CREATED_BY',

width: '150',

headerAlign: 'center',

align: 'center',

scope: false,

sortable: true

},

{key: '2',

label: '创建时间',

prop: 'CREATED_TIME',

width: '150',

headerAlign: 'center',

align: 'center',

scope: false,

sortable: true

},

{

key: '3',

label: '姓名',

prop: 'input111043',

width: '150',

headerAlign: 'center',

align: 'right',

scope: false,

sortable: true

},

{

key: '4',

label: '年龄1',

prop: 'number84077',

width: '150',

headerAlign: 'center',

align: 'right',

scope: false,

sortable: true

},

{

key: '5',

label: '简介',

prop: 'textarea99146',

width: '150',

headerAlign: 'left',

align: 'left',

scope: false,

sortable: false

}

]

五、配置菜单

在菜单列表中新增菜单信息：

组件路径：autoListInfo/autoListInfo

路由标识：唯一即可

路由参数：列表id和表单ID

{"listid":"38f60aa1af7e4190a309c5036d61be6c","formId":"40b92b6f91b4490ba2e1a00494665035"}

权限标识：system:autoListInfo:index

六、列表数据的展示以及增删改查

配置完菜单后，分配菜单权限给到对应的角色后，刷新页面就可以在列表中看到该页面信息

下边就是可以进行增删改查操作了：

新增：

修改：

删除：

总结

1、拖拉拽组件生成表单

2、输出表单json串

3、配置表单

4、配置列表

5、配置菜单

6、列表数据的展示以及增删改查

经过以上6个步骤就完成了基础表单和列表的配置，以及数据的增删改查操作。非常简单吧！！！

后续开发计划：

1、扩展基础数据的excel导入、导出功能

2、丰富页面组件

3、整合工作流和 待办，让业务数据流程化

4、扩展多数据源的数据接口存储