需求:
因为需求变更快,需要经常增加查询字段,更改较为麻烦,因此需要做一个通用的动态查询组件,每次变更不由前端控制,而是修改配置文件即可。
一、动态查询
解决思路:
定好前端需要的几种查询类型,返回格式,以及默认数据等等,利用前端的基础 24 分栏布局开发一个通用的组件。
实现效果如图:
除了查询按钮外,其余数据,包括查询条件的位置全由后端控制。
功能拓展:
该组件同样可以用于其他地方,比如动态展示详情页面,由后端返回详情页面需要展示的key、value,以及对应的大小、位置。
实现难点:
动态返回查询条件的showName以及paramsName,但是将参数名绑定到对应的input(或者其他)上去,利用的是props双向绑定的方法,但是从接口拿到的数据是无法确定的,也就是说,props对应变量的值,也是动态的。
最终是利用了一个新的数组,存储接口拿到的参数变量,放入props中,解决了问题。
总结:
项目中遇到的查询条件,一般包括:label input select checkbox 标题 空行 分割线等等,对应将每种格式在组件中写好,根据返回的type去匹配显示。
点击查询的时候,将输入的查询条件传出组件。
二、动态表格
利用element的table组件,展示数据由后端返回,很轻松的就可以实现表头展示数据的动态化了
三、其他
当动态查询和动态表格结合起来的时候,查询接口也可由后端控制返回。