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

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

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

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

循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计_第1张图片

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

循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计_第2张图片

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

 

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

    

循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计_第3张图片

 我们在弹出高级查询对话框中,

你可能感兴趣的:(循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计)