当前位置：首页 > VUE

vue如何实现表格查询

2026-02-22 12:58:41VUE

Vue 表格查询实现方法

基于计算属性的前端过滤

通过计算属性对表格数据进行过滤，适用于数据量较小的场景。定义查询输入框绑定到 searchQuery，计算属性 filteredData 实时返回匹配结果。

<template>
  <input v-model="searchQuery" placeholder="搜索...">
  <table>
    <tr v-for="item in filteredData" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ]
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(item => 
        item.name.includes(this.searchQuery) || 
        item.age.toString().includes(this.searchQuery)
      )
    }
  }
}
</script>

使用第三方组件库

Element UI 或 Ant Design Vue 等库提供封装好的表格查询功能。以 Element UI 为例：

<template>
  <el-input v-model="searchQuery" placeholder="输入关键字"></el-input>
  <el-table :data="filteredData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

后端接口查询

对于大数据量场景，通过 API 接口实现服务端查询：

methods: {
  async fetchData() {
    const res = await axios.get('/api/data', {
      params: { keyword: this.searchQuery }
    })
    this.tableData = res.data
  }
},
watch: {
  searchQuery() {
    this.fetchData()
  }
}

多条件高级查询

构建查询对象处理复杂条件：

data() {
  return {
    query: {
      name: '',
      age: null,
      dateRange: []
    }
  }
},
methods: {
  buildQueryParams() {
    const params = {}
    if (this.query.name) params.name = this.query.name
    if (this.query.age) params.age = this.query.age
    if (this.query.dateRange.length === 2) {
      params.startDate = this.query.dateRange[0]
      params.endDate = this.query.dateRange[1]
    }
    return params
  }
}