原因
在中后台系统中，经常可以遇到多个表单搜索加表格展示的页面。
这种表单搜索加表格展示，占中后台管理系统页面的50%-80%。虽然有很多优秀的UI组件库，例如 iview，antd，element-ui，但组件较为零散。每次构建需要大量组件拼装代码，单独写一个表单+表格页面我们就需要上百行代码来实现，带来的问题就是维护性较差，bug无法快速精准定位。
针对这种问题，我们现有成熟的框架，XXXAdmin，low code低代码可以解决。但是相结合自身实际业务，发现并不需要整套解决方案，只需要很少一部分即可。
为了提高开发效率，解放生产力，本着DRY(Don't Repeat Yourself )原则 ，我把表单和相关处理逻辑抽离出来，通过 JSON 抽象配置来动态生成表单，vue-form-reactive , 基于vue的响应式表单生成插件。
使用
const formDescriptors = reactive({
form: {
ref: 'node',
},
item: [ // 表单输入类型字段及校验配置
{
type: 'fSelect',
labelWidth: 120,
title: 'Select',
field: 'resource',
options: [], // 下拉数组
rule: [{ required: true}],
},
{
type: 'fInput',
labelWidth: 120,
title: 'Type',
field: 'type',
placeholder: '请输入类型',
rule: [
{ required: true, message: '请输入类型', trigger: 'blur' },
],
},
{
type: 'fInput',
labelWidth: 120,
title: 'Title',
field: 'title',
placeholder: '请输入标题',
rule: [
{ required: true, message: '请输入标题', trigger: 'blur' },
],
},
{
type: 'fInput',
labelWidth: 120,
title: 'Content',
field: 'content',
placeholder: '请输入内容',
rule: [{ validator: validateContent }],
},
{
type: 'fRadio',
labelWidth: 120,
title: '性别',
field: 'handleType',
group: {},
radios: [
{
label: '男',
key: '00',
},
{
label: '女',
key: '01',
disabled: true,
},
],
},
]
生提交成表单页面
生成搜索表单页面
具体用法请查看 vue-form-reactive
优点
- 通过 JSON 生成表单
- 基于 iview 和 jsx 语法。
- 体积小，便于各位拉取之后更改。
