循序渐进VUE+Element 前端应用开发(29）--- 高级查询条件的界面设计

在系统模块中的业务列表展示里面，一般我们都会在列表中放置一些查询条件，如果是表字段不多，大多数情况下，放置的条件有十个八个就可以了，如果是字段很多，而这些条件信息也很关键的时候，就可能放置很多条件，但是界面空间比较有限，而常规的查询一般就那么几个常用条件，如果每次都占用很多版面，好像不是很合理和友好。本篇随笔探讨Vue+Element前端界面中处理高级查询模块的界面设计，提供了两种处理的思路供参考借鉴。

1、弹出框的高级查询条件的界面设计

 如常规的列表界面如下所示。

单击【高级查询】弹出一个新对话框窗口，里面可以查看到所有的查询条件

 我们来一段动画效果，操作界面的动态效果如下所示。

 

这里我为了降低单页面的代码量，把高级查询模块的代码抽取到一个独立的文件中，然后在主体页面中引入使用。

    <testproduct-advance
      ref="advancesearch"
      @search="advanceSearch"
    />

 我们在弹出高级查询对话框中，执行