当前位置：首页 > VUE

vue表格实现查询

2026-02-23 20:34:28VUE

Vue表格查询实现方法

在Vue中实现表格查询功能通常需要结合数据绑定和过滤方法。以下是几种常见的实现方式：

数据过滤方法

使用计算属性对表格数据进行过滤：

computed: {
  filteredData() {
    return this.tableData.filter(item => {
      return item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    })
  }
}

模板中使用v-for渲染过滤后数据

<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>

使用第三方组件库

对于Element UI表格组件：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
</el-table>
<el-input v-model="searchQuery" placeholder="输入关键字搜索"></el-input>

多条件查询实现

可以通过扩展过滤逻辑实现多字段查询：

computed: {
  filteredData() {
    return this.tableData.filter(item => {
      const nameMatch = item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      const ageMatch = item.age.toString().includes(this.searchQuery)
      return nameMatch || ageMatch
    })
  }
}

服务端查询

对于大数据量情况，建议使用服务端查询：

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

性能优化建议

对于大型数据集，可以考虑：