循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计
在系统模块中的业务列表展示里面,一般我们都会在列表中放置一些查询条件,如果是表字段不多,大多数情况下,放置的条件有十个八个就可以了,如果是字段很多,而这些条件信息也很关键的时候,就可能放置很多条件,但是界面空间比较有限,而常规的查询一般就那么几个常用条件,如果每次都占用很多版面,好像不是很合理和友好。本篇随笔探讨Vue+Element前端界面中处理高级查询模块的界面设计,提供了两种处理的思路供参考借鉴。
1、弹出框的高级查询条件的界面设计
如常规的列表界面如下所示。
单击【高级查询】弹出一个新对话框窗口,里面可以查看到所有的查询条件
我们来一段动画效果,操作界面的动态效果如下所示。
这里我为了降低单页面的代码量,把高级查询模块的代码抽取到一个独立的文件中,然后在主体页面中引入使用。
<testproduct-advance
ref="advancesearch"
@search="advanceSearch"
/>
我们在弹出高级查询对话框中,执行查询的时候,会获得条件对象,然后通过事件的方式给调用页面
async handleSearch() { // 表单提交
this.isVisible = false;
this.$emit('search', this.searchForm)
},
在主页面里面,会对高级查询的几个事件进行处理,如打开窗口,确定高级查询后触发查询。
methods: {
advanceSearch(searchObj) { // 高级查询
// console.log(searchObj)
this.advanceSearchForm = searchObj;
this.msgSuccess('已选择高级查询条件进行查询了')
this.isAdvanceSeach = false // 关闭高级查询窗口
this.getlist()
},
onResetAdvance(searchObj) { // 重置高级查询条件
// console.log(searchObj)
this.advanceSearchForm = searchObj;
},
showAdvanceForm() { // 显示自定义的高级查询对话框
this.$refs.advancesearch.show()
},
在getlist函数里面,需要对高级查询对象进行转换处理
getlist() { // 列表数据获取
// 如果高级查询对象非空,则采用高级查询条件
var form = this.isEmpty(this.advanceSearchForm) ? this.searchForm : this.advanceSearchForm;
var param = { // 构造常规的分页查询条件
// 分页条件
SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
MaxResultCount: this.pageinfo.pagesize, // 查询过滤条件
ProductNo: form.productNo,
BarCode: form.barCode,
MaterialCode: form.materialCode,
ProductType: form.productType,
ProductName: form.productName,
Status: form.status
} .............
不过,由于高级查询和普通的查询界面代码有很多重复的地方,因此这样做感觉也相对比较啰嗦。
下面的思路就折叠的方案进行讨论。
2、折叠式的高级查询条件的界面设计
这个思路来自于AntDesign的查询条件展示,默认它是基于常规条件的展示,如果展开则展示更多的条件。
单击【展开】则展开更多的条件,以供查询。
借鉴了这个方式,我们也可以使用这样的折叠方式来隐藏更多的查询条件,从而也使得不常用的条件默认隐藏起来,提高界面的友好性。
这样折叠的条件和不折叠的条件在一个表单里面,只是通过一个状态的切换隐藏部分条件而已,虽然界面代码多增加一些,不过处理却变得简单一些,不需要单独编写一个高级查询的条件组件页面。
界面代码大致布局如下所示。
这样我们通过一个条件按钮来切换它的状态即可实现常用条件、高级查询条件的切换显示了。
<el-button :icon="expandMore ?'el-icon-arrow-up':'el-icon-arrow-down'" type="text" @click="expandMore =!expandMore">{{ expandMore ? '收起':'展开' }}</el-button>
这样查询处理,并不需要变化什么特殊的操作了,和常规操作一样,只不过多一些条件而已。
getlist() { // 列表数据获取
var param = { // 构造常规的分页查询条件
// 分页条件
SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
MaxResultCount: this.pageinfo.pagesize, // 查询过滤条件
Name: this.searchForm.name,
Sex: this.searchForm.sex,
............. State: this.searchForm.state
};
// 使用日期范围选择控件,在查询对象增加开始日期CreationTimeStart、结束日期CreationTimeEnd
this.addDateRange(param, this.searchForm.creationTime) // 获取列表,绑定到模型上,并修改分页数量
this.listLoading = true
testUser.GetAll(param).then(data => {
this.list = data.result.items
this.pageinfo.total = data.result.totalCount
this.listLoading = false
})
},
以上就是两种不同高级查询条件的界面设计,一般来说,我倾向于使用后者来实现,这样界面效果也比较完整统一。
循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计的更多相关文章
- 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...
- 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用
在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...
- 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用
在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...
- 循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理
我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言 ...
- 循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示
在我们做应用系统的时候,往往都会涉及图表的展示,综合的图表展示能够给客户带来视觉的享受和数据直观体验,同时也是增强客户认同感的举措之一.基于图表的处理,我们一般往往都是利用对应第三方的图表组件,然后在 ...
- 循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理
VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...
- 循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对 ...
- 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...
随机推荐
- pyside2安装避坑
cmd 输入 pip install PySide2 官方下载太慢 清华源: pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pysid ...
- 为什么网上有很多人说Python不要学
随着"大数据""云计算""人工智能"等等科技的兴起,IT行业在今后三到五年将会迎来一个高速发展期.这也就意味着会出现大量的人才缺口,尤其 ...
- postMessage 跨域
基于 postMessage 和 localStorage 的跨域本地存储方案 安·记 2014-09-07 2099 阅读 跨域 存储 localStorage HTML5 的 postMessag ...
- Linux机器之间SSH免密钥登录设置
SSH免密钥登录 私钥:密钥留在本机 公钥:密钥发给其他机 hadoop01 生成密钥: ssh-keygen -t rsa (密钥存放路径:/root/.ssh) id_rsa:私钥 id_rsa. ...
- SpringMVC中ModelAndView的两个jar包引起的思考servlet和portlet
在使用ModelAndView时,需要去导包,但是有两个包. 检查前台form表单提交的也正确,后台这也没有问题. 后来发现竟然时导包导错误了. 到此,如果是因为到错包问题,应该就解决了. 但是,深入 ...
- [Luogu P1345] [USACO5.4]奶牛的电信Telecowmunication (最小割)
题面 传送门:https://www.luogu.org/problemnew/show/P1345 ] Solution 这道题,需要一个小技巧了解决. 我相信很多像我这样接蒟蒻,看到这道题,不禁兴 ...
- Windows 10 启动出现蓝屏 终止代码:UNMOUNTABLE_BOOT_VOLUME
解决办法:在命令符窗口中[管理员权限] 1.– 修复Windows文件:损坏的Windows文件可能会导致严重的问题. sfc /scannow 2 .– 修复硬盘:确保您的硬盘依次运行,以及Wind ...
- UVA12558 埃及分数 Egyptian Fractions
题意描述 题目描述的翻译挺清楚的了. 和原题的区别是多了禁用的分母.(还有毒瘤输入输出) 算法分析 显然这道题没有什么很好的数学方法来解决,所以可以使用搜索. 由于不确定深度,深搜显然无穷无尽. 所以 ...
- 通俗易懂浅谈理解ES6类this不同指向问题
1. class Btn{ //定义的一个类 constructor(id){ // constructor是一个构造函数,是一个默认方法,通过 new 命令创建对象实例时,自动调用该方法.一个类必须 ...
- ABP框架中一对多,多对多关系的处理以及功能界面的处理(1)
在我们开发业务的时候,一般数据库表都有相关的关系,除了单独表外,一般还包括一对多.多对多等常见的关系,在实际开发过程中,需要结合系统框架做对应的处理,本篇随笔介绍基于ABP框架对EF实体.DTO关系的 ...