扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
1、背景
vue后台管理系统，会有很多表格页面，表格上方会有一些搜索选项，表格直接使用el-table即可，而搜索栏区域每次写起来都很繁琐，而且多人开发情况下每个人写的样式都不相同，布局样式无法统一。
所以要考虑对搜索栏做一个封装，统一配置引用，提升开发维护效率和界面统一。
完成后的效果大概就是长这样：
2、分析
项目使用的是elementui框架，搜索栏这种表单提交，首先要使用el-form组件来封装，而复杂点就是表单项可能有很多种，例如input输入框、select选择框、日期时间选择框、日期时间范围选择框、cascader级联选择框等，每一项的字段名prop、名称label、绑定的属性方法都不尽相同。所以不能通过普通的绑定个别属性的方式来处理，而slot插槽的方式也无法简化，最终决定通过传递一个配置项数组的形式来解析生成相应的结构。
3、实现
目前实现的方式由两部分组成，一部分是form表单组件，接受父组件传递的配置项数组，一部分是封装一些常用的表单项组件，通过v-if来控制，form表单组件里引入该表单项组件，循环遍历，根据传递的表单项类型来匹配显示具体的表单项。
form表单组件（searchForm.vue）示例代码：
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网