Vue-Ant Design Vue-自定义搜索功能的实现

太过爱你忘了你带给我的痛 2024-04-19 11:07 81阅读 0赞

之前几篇文章介绍了[Ant Design Vue][]的部分组件使用，如，过滤，table等等。当然在中后台项目中，table是必不可少的，随之配套的就是搜索功能。应该说所有的中后台项目中搜索功能都是非常重要的一块。该篇就介绍一下，如何在Ant Design Vue中实现搜索。  
下面的案例所使用到的UI和中后台设计，前面也介绍过。是基于 Ant Design 体系精心设计的：[Ant Design Pro of Vue][]

# 搜索项介绍 #

我们日常使用到的搜索功能一般有以下几种情况:

*  时间搜索  
    ![在这里插入图片描述][20190917163912919.png]
 *  普通输入搜索  
    ![在这里插入图片描述][20190917164019228.png]
 *  可选项搭配输入搜索  
    ![在这里插入图片描述][20190917164125854.png]
 *  下拉可选项搜索  
    ![在这里插入图片描述][2019091716424677.png]  
    大致分为以上这些单独搜索项以及以上几种的组合搜索。可能还有一些，不过在实现上同理。打架可以到官网找寻自己需要的组件使用。  
    组件库：https://vue.ant.design/components/dropdown-cn/  
    你也可以自己找一些UI封装自己喜欢的组件来使用。

# 实现 #

其实这篇结合：[Vue-Ant Design Pro of Vue-数据表格组件S-Table的使用(一)][Vue-Ant Design Pro of Vue-_S-Table]一起来看是比较好的，在Table组建中加入搜索功能。  
我写一个简单的例子来实现上面几种搜索方式，期间用到相关知识，如Table的使用还有自定义校验等等，不是太清楚的可以翻阅一下前面几篇。

<template>
    	<a-card style="margin-top: 24px" :bordered="false" :tabList="tabList" :activeTabKey="activeTabKey" @tabChange="(key) => {this.activeTabKey = key}" @click="check" >
      		<div class="table-page-search-wrapper">
          <a-form layout="inline" :form="form" @submit="search" >
            <a-row :gutter="48">
              <a-col :md="6" :sm="24">
                <a-form-item label="创建时间" :labelCol="{lg: {span: 7}, sm: {span: 7}}" :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
                  <a-range-picker name="buildTime" style="width: 100%" v-decorator="['buildTime', {rules: [{ required: false, message: '请选择起止日期' }]} ]" />
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <a-form-item label="来源类型" >
                  <a-select v-decorator="[ 'type', {rules: [{ required: false, message: '请选择来源类型' }]} ]" placeholder="全部" name="type">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option value="2">WWW</a-select-option>
                    <a-select-option value="1">YYY</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="2" :sm="24">
                <a-form-item>
                  <a-select v-decorator="[ 'searchType', {rules: [{ required: false, message: '请选择搜索类型' }]} ]" placeholder="请选择" name="searchType">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="1">AAA</a-select-option>
                    <a-select-option value="2">BBB</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <a-form-item>
                  <a-input v-decorator="[ 'searchValue', {rules: [{ required: false, message: '请输入搜索值' }]} ]" placeholder="请输入"/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" html-type="submit">查询</a-button>
                  <a-button style="margin-left: 8px" @click="reset">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
    
        </div>
      </a-card>
    </template>

如下图：  
![在这里插入图片描述][20190917165744623.png]  
这些都比较容易，组件基本都写好了，我这里只是加了一些校验。  
看下Vue是如何实现的。

其实上面关于搜索的代码实际没有多少，很少的几行，主要是结合Table组件使用后，便捷性提高了很多。你可以试试

[Ant Design Vue]: https://vue.ant.design
[Ant Design Pro of Vue]: https://pro.loacg.com/
[20190917163912919.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a6b3391ed4644351857d023a4bb80621.png
[20190917164019228.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e847bce0615e43b4839e99fb699e8a40.png
[20190917164125854.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7f4eedb1ab934616b2ceeac4d3374b13.png
[2019091716424677.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/677eb005f7674d139ff4b3be45ccdb13.png
[Vue-Ant Design Pro of Vue-_S-Table]: https://blog.csdn.net/gu_wen_jie/article/details/90702427
[20190917165744623.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b183fe0f6a4e4e6cb5a4590a0786030f.png