循序渐进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

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

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

发表评论

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

评论列表(12条)

  • 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

  • Gonzalo Obrien
    Gonzalo Obrien 2021年6月9日 上午3:08

    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,
    Gonzalo

  • Carolyn Eng
    Carolyn Eng 2021年6月11日 下午10:54

    We at BestLocalData.com has been hit badly by Covid-19 and as a result BestLocalData.com is shutting down.

    We provided the best data to companies to find their right customer base, we don’t want other companies to go down the same path we went and go out of business.

    As a result we are providing our data till the end of the week at the lowest possible prices.

    BestLocalData.com

  • Thaddeus Gooden
    Thaddeus Gooden 2021年6月16日 上午2:02

    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

  • Kerry Fernandes
    Kerry Fernandes 2021年6月18日 下午11:08

    Hello from FbCourses.net

    Want to pay $0.01 a click? We got you covered.

    A great team of Global Digital Marketing experts have compiled this list of 13 Best + Free Facebook Advertising Training, Classes and Courses to help you learn and excel at Facebook Ads & Marketing.

    Thousands of professionals have already benefited from this list on Facebook Training.

    Regards,
    Kerry

  • Tresa Kaufman
    Tresa Kaufman 2021年6月23日 下午8:16

    The plug welcomes you with a super discount of 15% on every product for a limited period of time! (Promo code: THEPLUG)

    We offer the largest assortment of private databases! Such as:

    – The Largest collection of Linkedin Databases!
    – Forex Consumers (worldwide)
    – Casino Consumers (worldwide)
    – Business Databases (worldwide)
    – Cryptocurrency consumers (worldwide)
    – many more..

    And the best part of it! We are the only source you will ever need! We have the largest database on the market with the greatest prices and team.

    Visit us: https://silent-plug.com/

  • Lucile Broussard
    Lucile Broussard 2021年7月1日 上午3:32

    Hi ,

    I am following up on my message below.

    Who would I speak with about handling your US order fulfillment and shipping?

    Regards,
    Lucile
    order-fulfillment.net

    ————————————————————————

    Hi,

    Who would I speak with at your company that manages your product shipping and order fulfillment?

    We are US company, offering warehousing, order fulfillment and drop shipping to our customers since 2005.

    Here are some of the items we ship for clients:

    -Books, training manuals, guides
    -E-com product drop shipping
    -New member welcomes boxes and gifts
    -Product samples
    -Health and Medical supplements
    -Marketing materials
    -Medical program test kits
    -Follow up gifts to clients, leads, and prospects

    Do you have some time to discuss – phone / email ?

    Thanks,

    Fulfillment Specialist
    http://www.Order-Fulfillment.net