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

原文地址

https://www.cnblogs.com/wuhuacong/p/14035302.html

在系统模块中的业务列表展示里面，一般我们都会在列表中放置一些查询条件，如果是表字段不多，大多数情况下，放置的条件有十个八个就可以了，如果是字段很多，而这些条件信息也很关键的时候，就可能放置很多条件，但是界面空间比较有限，而常规的查询一般就那么几个常用条件，如果每次都占用很多版面，好像不是很合理和友好。本篇随笔探讨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 前端应用开发(1）--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理

循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用

循序渐进VUE+Element 前端应用开发(7）--- 介绍一些常规的JS处理函数

循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用

循序渐进VUE+Element 前端应用开发(9）--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(11）--- 图标的维护和使用