当前位置：首页 > VUE

vue实现高级检索

2026-01-16 23:05:53VUE

Vue实现高级检索功能

高级检索功能通常包含多个筛选条件、组合查询、动态表单等复杂交互。以下是基于Vue的实现方案：

动态表单生成

使用v-for循环生成可配置的搜索条件表单：

<template>
  <div class="advanced-search">
    <div v-for="(field, index) in searchFields" :key="index">
      <label>{{ field.label }}</label>
      <input 
        v-model="searchParams[field.name]"
        :type="field.type || 'text'"
        v-if="!field.options">

      <select v-model="searchParams[field.name]" v-else>
        <option v-for="opt in field.options" :value="opt.value">
          {{ opt.label }}
        </option>
      </select>
    </div>
    <button @click="handleSearch">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchFields: [
        { name: 'keyword', label: '关键词', type: 'text' },
        { name: 'category', label: '分类', options: [...] },
        { name: 'dateRange', label: '日期范围', type: 'date' }
      ],
      searchParams: {}
    }
  },
  methods: {
    handleSearch() {
      this.$emit('search', this.searchParams)
    }
  }
}
</script>

组合查询逻辑

在后端接口处理前构建查询条件对象：

buildQuery() {
  const query = {}

  // 处理文本搜索
  if (this.searchParams.keyword) {
    query.$or = [
      { title: new RegExp(this.searchParams.keyword) },
      { content: new RegExp(this.searchParams.keyword) }
    ]
  }

  // 处理范围查询
  if (this.searchParams.dateRange) {
    query.createdAt = {
      $gte: new Date(this.searchParams.dateRange[0]),
      $lte: new Date(this.searchParams.dateRange[1])
    }
  }

  return query
}

异步加载选项

对于需要动态加载的选择框选项：

async loadCategoryOptions() {
  try {
    const res = await api.getCategories()
    this.searchFields.find(f => f.name === 'category').options = 
      res.data.map(item => ({
        label: item.name,
        value: item.id
      }))
  } catch (error) {
    console.error(error)
  }
}

表单验证

添加基础验证逻辑：

validateForm() {
  const errors = []

  if (this.searchParams.dateRange && 
      this.searchParams.dateRange[0] > this.searchParams.dateRange[1]) {
    errors.push('结束日期不能早于开始日期')
  }

  return errors.length ? errors : null
}

响应式布局优化

使用CSS Grid实现自适应布局：

.advanced-search {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

状态管理

对于复杂场景建议使用Vuex：

// store/modules/search.js
export default {
  state: {
    historyQueries: [],
    savedSearches: []
  },
  mutations: {
    ADD_HISTORY_QUERY(state, query) {
      state.historyQueries.unshift(query)
    }
  }
}

实现高级检索时需要注意：