vue实现更多搜索条件

Vue 实现更多搜索条件的方法

动态表单绑定

在 Vue 中可以通过 v-model 动态绑定表单元素，结合 v-for 渲染条件输入框。数据模型建议使用对象存储多个条件值：

data() {
  return {
    searchConditions: {
      keyword: '',
      category: '',
      dateRange: []
    }
  }
}

条件展开/收起控制

通过 v-if 或 v-show 控制高级条件的显示状态，配合计算属性优化性能：

computed: {
  showAdvanced() {
    return this.isAdvancedExpanded && this.hasAdvancedConditions
  }
}

表单元素组件化

将重复使用的条件表单封装为可复用组件，通过 props 接收配置参数：

<template>
  <condition-select 
    v-model="searchConditions.category"
    :options="categoryOptions"
  />
</template>

后端查询参数处理

在提交搜索前将条件对象转换为 API 需要的参数格式，可使用 lodash.pickBy 过滤空值：

methods: {
  buildQueryParams() {
    return _.pickBy(this.searchConditions, val => 
      val !== '' && !(Array.isArray(val) && val.length === 0)
    )
  }
}

响应式条件联动

使用 watch 或计算属性实现条件间的联动效果，如选择分类后自动加载子分类选项：

watch: {
  'searchConditions.category'(newVal) {
    this.loadSubCategories(newVal)
  }
}

URL 条件持久化

通过 vue-router 的查询参数同步搜索条件，实现页面刷新后条件保留：

watch: {
  searchConditions: {
    handler(newVal) {
      this.$router.push({ query: newVal })
    },
    deep: true
  }
}

移动端适配优化

针对移动设备采用折叠面板式布局，通过 CSS 媒体查询调整条件表单的排列方式：

@media (max-width: 768px) {
  .search-condition {
    flex-direction: column;
  }
}