为了迎合公司的OKR，我提出了对表单表格组件的封装。为什么我会有这个想法？实在这个组件我很早就想做了，只因此前做的是基于UI层面的，近期我接手了公司的一个项目叫童画，每天做的事情觉得便是复制粘贴，修正部分不同的功能和字段名称。组件的意义在于可以在碰着同一类设计场景时，可以复用，从而减少设计的韶光和形成产品的统一性。传统的搜索表单不便是这样吗？上面是表单搜索字段，中间是搜索结果的表格，下面是搜索结果的分页。把表单和表格组合起来的好处在于很多搜索字段都是基于表格组件的某些字段，那我根据search字段进行筛选不就可以了么，良久之前，我们总是在吐槽产品经理总是喜好截图现有功能，然后做字段修正，搞成原型扔给前端。如果前端也能像他这样大略，那该多好呀，类似这样的想法油然而生。刚开始我只是为了方便我的事情，没想到领导却重视了起来，想把这个组件推广给公司其他十几个前端同事利用，于是乎，我便负责开搞了起来。有理论还弗成，得有场景实践，刚好公司的项目童画有很多场景，我根据它里面的场景，做了很多功能的封装和兼容。
写到这里，有人会说了，这不便是CRUD组件吗？有这想法的话，解释你还太年轻和鄙视这个组件的功能了。传统的CRUD组件灵巧性不是很高，这个组件的好处是配置即可用，不用考虑其他搜索，翻页，清空等各种逻辑，让组件达到高度复用，封装了场景的插槽类型，但为了防止翻车，我还是预留了变态需求的插槽。字段的利用更多采取elementUI的命名办法，让利用者减少学习本钱。这样做的好处是什么呢？首先，前端再也不用写页面了，其次，对付比较规矩的搜索表单页面，完备可以通过要求接口的形式交给后端来配置呈现页面即可，根本没有前端什么事了，前真个事情可以解放出来做更繁芜的功能开拓。
二、部分事理搜索字段通过search=true进行筛选；分页通过要求的total总数进行分页；Vue.prototype.$query接入要求。三、组件文档
为了利用方便，我把它做成了组件并放到了公司的私服上，接下来的事情便是写文档啦，以下是部分文档的编写，由于韶光问题，没来得及好好检讨，各位看官姑息看一下就行啦。
export default {options: { request: { api: '/student/web/student/enroll/list', method: 'GET', paramMap: { index: 'pageIndex', limit: 'pageSize' }, resultMapping: { total: 'total', data: 'pageData' } }, size: '', // medium/mini/small, 默认medium labelWidth: 90, submitBtn: true, // 搜索按钮，默认true，非必填 submitText: '查询', // 搜索按钮的笔墨，默认查询，非必填 clearBtn: true, // 打消按钮，默认true clearSize: 'mini', // medium/mini/small, 默认medium clearText: '打消', // 打消按钮的笔墨，默认打消，非必填 column: [ { slotType: 'selection' }, { prop: 'keyword', label: '学员/家长', search: true, hide: true }, { prop: 'studentName', label: '学员' }, { prop: 'telephone', label: '家长手机号', width: 130 }, { prop: 'type', label: '报名类型', width: 90, search: true, type: 'select', slot: true, slotType: 'text', slotArray: [{ label: '新报', value: 1 }, { label: '续报', value: 2 }], dicData: [{ label: '新报', value: 1 }, { label: '续报', value: 2 }] }, { prop: 'courseFee', label: '缴费金额', slot: true, slotType: 'regEx', regEx: '¥{{courseFee/100}}' }, { prop: 'payType', label: '支付办法', search: true, type: 'select', width: 100, dicData: [ { label: '微信', value: '微信' }, { label: '支付宝', value: '支付宝' }, { label: '银行卡转账', value: '银行卡转账' }, { label: '其它', value: '其它' } ] }, { prop: 'courseCount', label: '报名课时' }, { prop: 'followTeacher', label: '跟进人' }, { prop: 'createTime', label: '报名韶光', param: 'beginTime,endTime', format: 'yyyy 年 MM 月 dd 日', valueFormat: 'timestamp', search: true, width: 160, type: 'daterange' }, { prop: 'auditor', label: '报名老师', search: true, param: 'teacherId', // 改动要求参数名 type: 'select', dicData: [], dicUrl: '/org/web/org/user/list/teacher', dicMap: { label: 'userName', value: 'id' } }, { prop: 'status', label: '报名状态', slot: true, slotType: 'tag', width: 110, slotArray: [{ type: 'warning', label: '待审核', value: 1 }, { type: 'danger', label: '审核不通过', value: 3 }, { type: 'success', label: '审核通过', value: 2 }], dicUrl: '' }, { prop: 'operation', label: '操作', width: 80, slot: true, slotType: 'operation', slotArray: [ { label: '去审核', value: 'handle', filter: ({status}) => { return status === 1 } } ] } ]}}
天生的页面
四、末了感谢
末了，感谢同事世丞在字段命名上给了很多建议，同时也感谢领导给了很多刁难的见地，让这个组件的功能加倍强大，也让开发者利用更方便，达到配置即可利用的地步。当然了，组件还须要更多场景的演习才能真正实现各种功能的兼容。后期我希望可以尽快放到layout官网上，供大家利用。
五、关于作者
一个会美工与后端PHP/nodejs的全栈工程师
更多学习内容欢迎关注
微信"大众号 ：程序员周师长西席
