告别复杂查询烦恼：Ant Design Vue Pro高级搜索功能全解析

【免费下载链接】ant-design-vue-pro 项目地址: https://gitcode.com/gh_mirrors/antd/ant-design-vue-pro

你是否还在为系统中复杂条件的查询功能开发而头疼？筛选条件太多导致界面混乱？多维度组合查询难以实现？本文将详细介绍Ant Design Vue Pro中的高级搜索功能实现方案，通过组件化设计和灵活配置，让你轻松掌握复杂条件查询的最佳实践。读完本文，你将能够快速构建出既美观又实用的高级搜索界面，提升用户体验和开发效率。

高级搜索功能架构概览

Ant Design Vue Pro（以下简称AVP）的高级搜索功能采用分层设计，主要由搜索布局容器、条件筛选区和结果展示区三部分组成。这种架构既保证了界面的清晰有序，又实现了功能的灵活扩展。

核心实现位于src/views/list/search/目录下，主要包含以下文件：

• SearchLayout.vue：搜索页面的整体布局容器，提供顶部搜索框和标签页切换功能
• Article.vue：文章搜索页面，展示文章类数据的高级搜索实现
• Projects.vue：项目搜索页面，展示项目类数据的卡片式搜索结果
• Applications.vue：应用搜索页面，展示应用类数据的搜索实现
• components/：搜索功能相关的组件目录，包含IconText等辅助组件

搜索布局容器：SearchLayout.vue实现

SearchLayout.vue作为高级搜索功能的容器组件，负责提供统一的搜索入口和内容区域布局。它使用PageHeaderWrapper组件实现页面标题和标签页切换功能，同时通过router-view动态加载不同类型的搜索内容。

<template>
  <page-header-wrapper
    :tab-list="tabList"
    :tab-active-key="tabActiveKey"
    :tab-change="handleTabChange"
  >
    <template v-slot:content>
      <div class="ant-pro-page-header-search">
        <a-input-search size="large" style="width: 80%; max-width: 522px;">
          <template v-slot:enterButton>
            搜索
          </template>
        </a-input-search>
      </div>
    </template>
    <router-view />
  </page-header-wrapper>
</template>

关键实现要点：

1. 标签页切换：通过tabList定义"文章"、"项目"、"应用"三个标签页，实现不同类型数据的搜索切换
2. 搜索框设计：使用a-input-search组件实现顶部主搜索框，占页面宽度80%，最大宽度522px，保证在不同设备上的显示效果
3. 内容区域动态加载：通过router-view加载不同类型的搜索页面，实现代码解耦和功能模块化

相关代码：SearchLayout.vue

多条件筛选区实现：组件化设计

高级搜索的核心在于多条件筛选，AVP采用组件化方式实现了灵活的筛选条件配置。以文章搜索为例，筛选区主要包含以下元素：

标签选择器（TagSelect）

标签选择器用于实现多选的分类筛选，用户可以通过点击标签快速添加或移除筛选条件。

<standard-form-row title="所属类目" block style="padding-bottom: 11px;">
  <a-form-item>
    <tag-select>
      <tag-select-option value="Category1">类目一</tag-select-option>
      <tag-select-option value="Category2">类目二</tag-select-option>
      <!-- 更多类目选项 -->
    </tag-select>
  </a-form-item>
</standard-form-row>

这种实现方式相比传统的下拉多选框，具有以下优势：

• 已选条件可视化展示，用户可以直观了解当前筛选状态
• 支持快速取消单个筛选条件，操作便捷
• 标签式布局节省空间，适合多选项场景

标准表单行（StandardFormRow）

AVP自定义的StandardFormRow组件用于实现筛选条件的分组和布局，它可以统一管理表单标签和内容区域的布局，确保整个筛选区的样式一致性。

<standard-form-row title="owner" grid>
  <a-row>
    <a-col :md="24">
      <a-form-item :wrapper-col="{ span: 24 }">
        <a-select
          style="max-width: 268px; width: 100%;"
          mode="multiple"
          placeholder="选择 onwer"
          v-decorator="['owner']"
          @change="handleChange"
        >
          <a-select-option v-for="item in owners" :key="item.id">{{ item.name }}</a-select-option>
        </a-select>
        <a class="list-articles-trigger" @click="setOwner">只看自己的</a>
      </a-form-item>
    </a-col>
  </a-row>
</standard-form-row>

StandardFormRow组件支持两种布局模式：普通模式和网格（grid）模式，通过grid属性控制。当设置grid为true时，内部内容将使用Ant Design的栅格系统进行布局，适合多列排列的筛选条件。

相关代码：Article.vue

筛选条件组合策略

AVP的高级搜索功能采用"与"逻辑组合所有筛选条件，即用户选择的所有条件将同时生效。这种设计符合大多数用户的使用习惯，也简化了后端API的实现复杂度。

条件组合的实现位于各搜索页面的getList方法中，通过收集表单中的所有筛选条件，构建查询参数对象，然后发送请求获取筛选结果。

getList () {
  // 获取表单中的所有筛选条件
  const formValues = this.form.getFieldsValue()
  // 构建查询参数
  const params = {
    ...formValues,
    // 添加分页等其他参数
  }
  // 发送请求获取数据
  this.$http.get('/list/article', { params }).then(res => {
    this.data = res.result
    this.loading = false
  })
}

结果展示区实现：多样化展示方案

根据不同类型的数据特点，AVP提供了多种搜索结果展示方式，满足不同场景的需求。

文章列表式展示

文章类数据采用列表式展示，适合以文字内容为主的数据类型。实现位于Article.vue中，使用a-list组件展示搜索结果，每条结果包含标题、标签、描述和操作按钮。

<a-list
  size="large"
  rowKey="id"
  :loading="loading"
  itemLayout="vertical"
  :dataSource="data"
>
  <a-list-item :key="item.id" slot="renderItem" slot-scope="item">
    <template slot="actions">
      <icon-text type="star-o" :text="item.star" />
      <icon-text type="like-o" :text="item.like" />
      <icon-text type="message" :text="item.message" />
    </template>
    <a-list-item-meta>
      <a slot="title" href="https://vue.ant.design/">{{ item.title }}</a>
      <template slot="description">
        <span>
          <a-tag>Ant Design</a-tag>
          <a-tag>设计语言</a-tag>
          <a-tag>蚂蚁金服</a-tag>
        </span>
      </template>
    </a-list-item-meta>
    <article-list-content :description="item.description" :owner="item.owner" :avatar="item.avatar" :href="item.href" :updateAt="item.updatedAt" />
  </a-list-item>
</a-list>

其中，IconText组件用于展示带图标的统计数据，如点赞数、评论数等。该组件实现简洁但功能实用，值得在项目中复用。

相关代码：IconText.vue

项目卡片式展示

项目类数据采用卡片式网格布局，适合包含图片预览的数据类型。实现位于Projects.vue中，使用a-list的grid属性实现卡片的网格排列。

<a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }">
  <a-list-item slot="renderItem" slot-scope="item">
    <a-card class="ant-pro-pages-list-projects-card" hoverable>
      <img slot="cover" :src="item.cover" :alt="item.title" />
      <a-card-meta :title="item.title">
        <template slot="description">
          <ellipsis :length="50">{{ item.description }}</ellipsis>
        </template>
      </a-card-meta>
      <div class="cardItemContent">
        <span>{{ item.updatedAt | fromNow }}</span>
        <div class="avatarList">
          <avatar-list size="small" :max-length="2">
            <avatar-list-item
              v-for="(member, i) in item.members"
              :key="`${item.id}-avatar-${i}`"
              :src="member.avatar"
              :tips="member.name"
            />
          </avatar-list>
        </div>
      </div>
    </a-card>
  </a-list-item>
</a-list>

这种布局方式的特点是：

• 响应式设计，根据屏幕宽度自动调整每行显示的卡片数量
• 使用卡片组件展示项目封面图片，提升视觉效果
• 集成Ellipsis组件实现文本过长时的省略显示
• 使用AvatarList组件展示项目成员信息

相关代码：Projects.vue

应用信息式展示

应用类数据采用简洁的信息卡片式展示，突出关键指标和操作按钮。实现位于Applications.vue中，卡片包含应用图标、名称、关键数据指标和操作按钮组。

<a-list
  :loading="loading"
  :data-source="data"
  :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }"
  style="margin-top: 24px;"
>
  <a-list-item slot="renderItem" slot-scope="item">
    <a-card :body-style="{ paddingBottom: 20 }" hoverable>
      <a-card-meta :title="item.title">
        <template slot="avatar">
          <a-avatar size="small" :src="item.avatar" />
        </template>
      </a-card-meta>
      <template slot="actions">
        <a-tooltip title="下载">
          <a-icon type="download" />
        </a-tooltip>
        <a-tooltip title="编辑">
          <a-icon type="edit" />
        </a-tooltip>
        <a-tooltip title="分享">
          <a-icon type="share-alt" />
        </a-tooltip>
        <!-- 更多操作 -->
      </template>
      <div class="">
        <card-info active-user="100" new-user="999"></card-info>
      </div>
    </a-card>
  </a-list-item>
</a-list>

这种展示方式的特点是：

• 卡片体积小，信息密度高
• 操作按钮位于卡片底部，便于用户快速操作
• 集成CardInfo组件展示关键业务指标

相关代码：Applications.vue

最佳实践与扩展建议

基于AVP高级搜索功能的实现，我们可以总结出以下最佳实践：

组件化设计

将搜索功能拆分为布局容器、筛选区和结果区等组件，提高代码复用性和可维护性。AVP中的StandardFormRow、TagSelect等组件都是很好的实践案例。

响应式布局

使用Ant Design的栅格系统实现响应式布局，确保搜索功能在不同设备上都有良好的显示效果。例如Projects.vue中的列表网格配置：

:grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }"

渐进式加载

实现加载更多功能，避免一次性加载大量数据影响性能。Article.vue中的loadMore方法实现了这一功能：

loadMore () {
  this.loadingMore = true
  this.$http.get('/list/article').then(res => {
    this.data = this.data.concat(res.result)
  }).finally(() => {
    this.loadingMore = false
  })
}

扩展建议

1. 保存搜索条件：添加保存用户常用搜索条件的功能，提升用户体验
2. 高级搜索模态框：对于筛选条件非常多的场景，可以将部分条件放入弹窗中
3. 搜索历史记录：记录用户的搜索历史，方便用户快速重复之前的搜索
4. 搜索条件分组：对于复杂的业务场景，可以对筛选条件进行分组，使用折叠面板展示

总结与展望

Ant Design Vue Pro的高级搜索功能通过组件化设计和灵活配置，为我们提供了实现复杂条件查询的优秀方案。它不仅满足了基本的多条件筛选需求，还通过多样化的结果展示方式和良好的用户体验设计，提升了整个系统的可用性。

随着业务的发展，搜索功能将越来越重要。未来可以考虑引入全文检索引擎（如Elasticsearch），实现更强大的搜索能力，包括关键词高亮、相关度排序等高级功能。

希望本文对你理解和使用Ant Design Vue Pro的高级搜索功能有所帮助。如果你有更好的实现方案或扩展建议，欢迎在评论区分享。别忘了点赞、收藏本文，关注作者获取更多前端开发最佳实践！

官方文档：README.md 组件源码：src/components/ 搜索功能实现：src/views/list/search/

【免费下载链接】ant-design-vue-pro 项目地址: https://gitcode.com/gh_mirrors/antd/ant-design-vue-pro