vue如何实现表格查询

Vue 实现表格查询的方法

使用计算属性过滤数据

在 Vue 中可以通过计算属性对表格数据进行过滤，实现查询功能。定义一个计算属性，根据输入的关键字返回过滤后的数据列表。

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用第三方表格组件

对于更复杂的表格查询需求，可以使用第三方表格组件如 Element UI 或 Ant Design Vue，它们内置了查询功能。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
  <el-input v-model="searchInput" placeholder="Search name"></el-input>
</template>

<script>
export default {
  data() {
    return {
      searchInput: '',
      tableData: [/* your data */]
    }
  },
  computed: {
    filteredTableData() {
      return this.tableData.filter(data => 
        data.name.includes(this.searchInput)
      )
    }
  }
}
</script>

后端分页查询

当数据量很大时，建议将查询逻辑放到后端，前端只发送查询参数并接收返回结果。

methods: {
  async searchTable() {
    const params = {
      keyword: this.searchKeyword,
      page: this.currentPage
    }
    const res = await axios.get('/api/items', { params })
    this.tableData = res.data
  }
}

多条件查询

实现多条件查询可以扩展过滤逻辑，组合多个查询条件。

computed: {
  filteredItems() {
    return this.items.filter(item => {
      const nameMatch = item.name.toLowerCase().includes(this.nameQuery.toLowerCase())
      const ageMatch = item.age.toString().includes(this.ageQuery)
      return nameMatch && ageMatch
    })
  }
}

使用 Lodash 进行防抖查询

对于频繁触发的查询输入，可以使用 Lodash 的防抖函数优化性能。

import { debounce } from 'lodash'

methods: {
  search: debounce(function() {
    // your search logic
  }, 500)
}