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

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

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

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

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

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

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

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

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

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

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

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

 我们在弹出高级查询对话框中,执行查询的时候,会获得条件对象,然后通过事件的方式给调用页面

    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的查询条件展示,默认它是基于常规条件的展示,如果展开则展示更多的条件。

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

单击【展开】则展开更多的条件,以供查询。

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

借鉴了这个方式,我们也可以使用这样的折叠方式来隐藏更多的查询条件,从而也使得不常用的条件默认隐藏起来,提高界面的友好性。

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

 

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

 这样折叠的条件和不折叠的条件在一个表单里面,只是通过一个状态的切换隐藏部分条件而已,虽然界面代码多增加一些,不过处理却变得简单一些,不需要单独编写一个高级查询的条件组件页面。

界面代码大致布局如下所示。

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

 

这样我们通过一个条件按钮来切换它的状态即可实现常用条件、高级查询条件的切换显示了。

<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
      })
    },

以上就是两种不同高级查询条件的界面设计,一般来说,我倾向于使用后者来实现,这样界面效果也比较完整统一。

 

原创文章,作者:迷途资源,如若转载,请注明出处:https://www.mipng.com/557.html

这些信息可能会帮助到你: 下载帮助 | 报毒说明 | 进站必看

修改版本安卓软件,加群提示为修改者自留,非本站信息,注意鉴别

发表评论

邮箱地址不会被公开。 必填项已用*标注

评论列表(6条)

  • Elton Montenegro
    Elton Montenegro 2021年1月19日 上午12:28

    It is with sad regret to inform you StarDataGroup.com is shutting down.
    It has been a tough year all round and we decided to go out with a bang!

    Any group of databases listed below is $49 or $149 for all 16 databases in this one time offer.
    You can purchase it at http://www.StarDataGroup.com and view samples.

    – LinkedIn Database
    43,535,433 LinkedIn Records

    – USA B2B Companies Database
    28,147,835 Companies

    – Forex
    Forex South Africa 113,550 Forex Traders
    Forex Australia 135,696 Forex Traders
    Forex UK 779,674 Forex Traders

    – UK Companies Database
    521,303 Companies

    – German Databases
    German Companies Database: 2,209,191 Companies
    German Executives Database: 985,048 Executives

    – Australian Companies Database
    1,806,596 Companies

    – UAE Companies Database
    950,652 Companies

    – Affiliate Marketers Database
    494,909 records

    – South African Databases
    B2B Companies Database: 1,462,227 Companies
    Directors Database: 758,834 Directors
    Healthcare Database: 376,599 Medical Professionals
    Wholesalers Database: 106,932 Wholesalers
    Real Estate Agent Database: 257,980 Estate Agents
    Forex South Africa: 113,550 Forex Traders

    Visit http://www.stardatagroup.com or contact us with any queries.

    Kind Regards,
    StarDataGroup.com

  • Huey Hope
    Huey Hope 2021年5月11日 下午12:37

    Hello from SendBulkMails.com,

    We have a special limited offer for you to send unlimited emails.

    We allow non-permission based emails and you won’t ever get blocked.

    We also buy your domain for you and give you a clean IP and setup your DNS records.

    Check us out on SendBulkMails.com

  • Dakota Pemulwuy
    Dakota Pemulwuy 2021年5月19日 上午3:51

    Hello from order-fulfillment.net,

    Doing your own product shipping or order fulfillment in house?

    Tired of it? Visit us on http://www.order-fulfillment.net

    We can store, inventory, and manage your drop shipping / order fulfillment for you.

    Based in the US for almost 2 decades – we ship around the world and will save you time and money.

    Who would be the best contact at your company to discuss?

    Here are some of the items we ship for clients:
    -Books, training manuals, guides
    -New member welcomes boxes and gifts
    -Product samples
    -Marketing materials
    -Medical program test kits
    -Follow up gifts to clients, leads, and prospects

    Thank you!
    Fulfillment Warehouse
    https://order-fulfillment.net

  • Della Huntingfield
    Della Huntingfield 2021年5月20日 上午9:29

    Are you looking for the best way to market your business?

    FbCourses.net has the answer..

    Not sure where to start, or what to do?

    Why not learn from the best. All of the best.

    We are offering at never before seen prices all of the top courses for one insanely low price.

    If you have been thinking of how to generate more leads, website traffic or sales today is the day.

    All courses are available in full with immediate download on FbCourses.net

    Not sure which one you like, for the next 24 hours we are offering the entire suite of courses for the lowest amount you could possible imagine.

    Check us out : FbCourses.net

    You could be driving new income or starting the new side hustle today!

  • Odell Demarco
    Odell Demarco 2021年5月25日 上午12:44

    Hello,

    It is with sad regret to inform you that BestLocalData.com is shutting down.

    We have made all our databases for sale for a once-off price.

    Visit our website to get the best bargain of your life. BestLocalData.com

    Regards,
    Odell

  • Sebastian Cazaly
    Sebastian Cazaly 2021年6月5日 上午4:28

    Hello,

    It is with sad regret to inform you that BestLocalData.com is shutting down.

    We have made all our databases for sale for a once-off price.

    Visit our website to get the best bargain of your life. BestLocalData.com

    Regards,
    Sebastian