背景近年来开发了一些后台系统。最常见的场景是内容管理页面，主要包括表单查询和各种管理操作。随着业务的扩大，在开发了很多类似的页面后，发现同一个项目中各个窗体的结构、样式、样式都大体相同。每次添加新页面时，都会使用copy方法修改参数逻辑。这种写法容易产生很多重复的代码，于是想到了封装组件，希望能提高代码复用率，提高开发效率。之前的项目主要是基于Vue2+ElementUI开发的，所以本文在此基础上发表一些关于表单封装的设计和思考。代码已经上传到github仓库（Form组件），欢迎star???设计&实现可配置的表单我们来看下面两个表单案例，表单一：查询修改删除表格2：查询修改删除我们把表单分成两部分，输入框item和按钮组比较两种形式，按钮组由三个文本和类型相同的按钮组成，不同的是形式1中的一些按钮带有图标。输入框项目也是如此。标签的性质基本相同。不同的是一些配置，包括label,placeholder,clearable...让我们尝试提取这些配置并生成一个JSON格式的数据。会发生什么？我们先看看按钮组。按钮需要什么？Text,bindingmethod,size,style....根据elementUI按钮组件提供的props，一个按钮可以描述为如下配置：{name:'query',type:'primary',text:'query',icon:'el-icon-search',size:'small'}因为按钮绑定的功能可能会涉及到表单外的数据，所以决定为按钮配置一个唯一标识：name，我们可以让按钮触发自定义事件并在单击时传递名称。让我们看一下输入框项目。输入框一般包含哪些属性？类型类型。如input、select、cascader（级联选择器）标签输入项描述。名称字段名称。value条目绑定到的值。占位符、大小、可清除、禁用和其他配置。基于以上配置，我们使用一个JSON数据来描述一个表单：{inputs:[{type:'input',name:'name',label:'name',value:''},{type:'select'，名称：'性别'，标签：'性别'，选项：[{标签：'男'，值：'1'}，{标签：'女'，值：'2'}]，值：''}],button:[{name:'query',type:'primary',text:'query',icon:'el-icon-search'},{name:'delete',type:'danger',文本:'Delete',icon:'el-icon-delete'}]}相比于之前用template编写的表单，这种json配置更清晰，更易于维护。我们可以进一步优化它。对于大量重复的表单项配置，我们可以提前写好，然后通过查询、删除、修改按钮等模块暴露出来。此外，对于可能需要跨表单统一的大小等属性，可以通过依赖注入来全局配置它们。配置好有用的渲染函数后，下一步就是将其转换为真正的表单组件。对于按钮组部分，只是v-forashuttle。同时给按钮绑定点击事件，触发自定义事件并传递按钮的标识符：name。{{button.text}}对于输入框item的部分，会有一些不同的情况，比如el-input,el-select等...我开始的写法也很简单，直接用v-if区分：
