vue实现动态查询，查询字段以及类型由后端返回，展示的表格字段也由后端控制

需求：

       因为需求变更快，需要经常增加查询字段，更改较为麻烦，因此需要做一个通用的动态查询组件，每次变更不由前端控制，而是修改配置文件即可。

 

一、动态查询

解决思路：

      定好前端需要的几种查询类型，返回格式，以及默认数据等等，利用前端的基础 24 分栏布局开发一个通用的组件。

 

实现效果如图：

除了查询按钮外，其余数据，包括查询条件的位置全由后端控制。

功能拓展：

该组件同样可以用于其他地方，比如动态展示详情页面，由后端返回详情页面需要展示的key、value，以及对应的大小、位置。

实现难点：

动态返回查询条件的showName以及paramsName,但是将参数名绑定到对应的input（或者其他）上去，利用的是props双向绑定的方法，但是从接口拿到的数据是无法确定的，也就是说，props对应变量的值，也是动态的。

最终是利用了一个新的数组，存储接口拿到的参数变量，放入props中，解决了问题。

总结：

项目中遇到的查询条件，一般包括:label  input  select  checkbox  标题  空行  分割线等等，对应将每种格式在组件中写好，根据返回的type去匹配显示。

点击查询的时候，将输入的查询条件传出组件。

 

二、动态表格

利用element的table组件，展示数据由后端返回，很轻松的就可以实现表头展示数据的动态化了

三、其他

当动态查询和动态表格结合起来的时候，查询接口也可由后端控制返回。