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

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

搜索项介绍

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

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

实现

其实这篇结合：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">WWWa-select-option>
                <a-select-option value="1">YYYa-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">AAAa-select-option>
                <a-select-option value="2">BBBa-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>

如下图：

这些都比较容易，组件基本都写好了，我这里只是加了一些校验。
看下Vue是如何实现的。

<script>
	import ...
	export default {
        name: 'TableList',
        components: {
            ...
        },
        inject: ['reload'],//这是为了实现组件局部刷新注入的reload，在前面文章有过介绍
        data () {
            return {
                description: '列表',
                ...
                ...
                form: this.$form.createForm(this),

                searchValue: '',
                // 高级搜索 展开/关闭
                advanced: false,
                // 查询参数
                queryParam: {},
                // 表头
                columns: [
                    ...
                    ...
                ],
                parameter: {},
                // 加载数据方法 必须为 Promise 对象
                    loadData: (parameter) => {
                    parameter.page = parameter.pageNo;
                    Object.assign(parameter,this.queryParam);
                    return getOrderList(parameter)
                        .then(res => {
                            this.orderTotal = res.result.totalCount
                            return res.result
                        })
                }
            }
        },
        searchType:'',
        searchValue:'',
        methods: {
         	//重置按钮，清空搜索选项，使用reload实现局部刷新重载页面
            reset () {
                this.form.resetFields()
                this.reload()
            },
           
            handleChange (value) {
                this.searchType = value
            },
            search (e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        if(values.buildTime && values.buildTime.length!=0){
							//这里是获取选择的起止时间，下面方法比较麻烦，你可以自行处理，获取到即可
                            var d = new Date(values.buildTime[0]._d);
                            var o = new Date(values.buildTime[1]._d);
                            let  start_time =d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + '00' + ':' + '00' + ':' + '00';
                            let  end_time = o.getFullYear() + '-' + (o.getMonth() + 1) + '-' + o.getDate() + ' ' + '23' + ':' + '59' + ':' + '59';
                            values.start_time = start_time;
                            values.end_time = end_time;
                        }
						//通过加载数据方法loadData你会发现，我们传进了参数queryParam，
						//就是在这里组装好赋值给我们定义的queryParam
						//这里是比较简单的，主要是数据的驱动工作已经给封装好了，我们做的仅仅是在这里组装好查询参数即可
                        this.queryParam={
                            start_time:values.start_time,
                            end_time:values.end_time,
                            type:values.type,
                            searchType:values.searchType,
                            searchValue:values.searchValue
                        };
                        //这个地方你可以加上一个延时器，loading效果会形象一点，也可以不加
                        this.$refs.stable.refresh() // refresh() 不传参默认值 false 不刷新到分页第一页
                        //setTimeout(() => {
                          //  this.$refs.stable.refresh() // refresh() 不传参默认值 false 不刷新到分页第一页
                        //}, 500)
                    }
                });
            }
        },
    }
</script>

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