当前位置：首页 > VUE

vue实现组合查询

2026-01-08 14:02:00VUE

vue实现组合查询

组合查询通常涉及多个条件的联合筛选，Vue可以结合计算属性、v-model和数组方法实现高效查询。以下是具体实现方式：

数据准备与绑定

在Vue组件中定义查询条件和数据集合：

vue实现组合查询

data() {
  return {
    searchParams: {
      name: '',
      age: '',
      status: ''
    },
    rawData: [
      { id: 1, name: 'Alice', age: 25, status: 'active' },
      { id: 2, name: 'Bob', age: 30, status: 'inactive' }
    ]
  }
}

计算属性实现筛选

使用计算属性动态过滤数据：

computed: {
  filteredData() {
    return this.rawData.filter(item => {
      return (
        (this.searchParams.name === '' || 
         item.name.includes(this.searchParams.name)) &&
        (this.searchParams.age === '' || 
         item.age == this.searchParams.age) &&
        (this.searchParams.status === '' || 
         item.status === this.searchParams.status)
      )
    })
  }
}

模板中的双向绑定

在模板中使用v-model绑定查询条件：

vue实现组合查询

<div>
  <input v-model="searchParams.name" placeholder="姓名">
  <input v-model="searchParams.age" placeholder="年龄" type="number">
  <select v-model="searchParams.status">
    <option value="">全部状态</option>
    <option value="active">活跃</option>
    <option value="inactive">非活跃</option>
  </select>
</div>

动态渲染结果

展示筛选后的数据：

<ul>
  <li v-for="item in filteredData" :key="item.id">
    {{ item.name }} - {{ item.age }} - {{ item.status }}
  </li>
</ul>

高级筛选优化

对于复杂查询条件，可采用对象遍历方式：

computed: {
  filteredData() {
    return this.rawData.filter(item => {
      return Object.keys(this.searchParams).every(key => {
        const searchValue = this.searchParams[key]
        return searchValue === '' || 
               String(item[key]).includes(String(searchValue))
      })
    })
  }
}