vue实现表格查询

Vue实现表格查询功能

使用Vue实现表格查询功能通常需要结合数据绑定、计算属性和事件处理。以下是一个完整的实现方案：

模板部分

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <table>
      <thead>
        <tr>
          <th v-for="col in columns" :key="col">{{ col }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredItems" :key="item.id">
          <td v-for="col in columns" :key="col">{{ item[col] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      searchQuery: '',
      columns: ['id', 'name', 'age', 'email'],
      items: [
        { id: 1, name: '张三', age: 25, email: 'zhang@example.com' },
        { id: 2, name: '李四', age: 30, email: 'li@example.com' },
        { id: 3, name: '王五', age: 28, email: 'wang@example.com' }
      ]
    }
  },
  computed: {
    filteredItems() {
      const query = this.searchQuery.toLowerCase()
      return this.items.filter(item => {
        return Object.values(item).some(
          value => String(value).toLowerCase().includes(query)
        )
      })
    }
  }
}
</script>

实现分页查询

对于大数据量的表格，可以添加分页功能：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <table>
      <!-- 表格内容同上 -->
    </table>
    <div>
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 10,
      // 其他数据同上
    }
  },
  computed: {
    filteredItems() {
      const query = this.searchQuery.toLowerCase()
      return this.items.filter(item => {
        return Object.values(item).some(
          value => String(value).toLowerCase().includes(query)
        )
      })
    },
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      return this.filteredItems.slice(start, start + this.itemsPerPage)
    },
    totalPages() {
      return Math.ceil(this.filteredItems.length / this.itemsPerPage)
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    }
  }
}
</script>

使用第三方组件库

对于更复杂的表格需求，可以使用现成的Vue表格组件库：

1. Element UI表格

   
   import { ElTable, ElTableColumn, ElInput } from 'element-plus'

export default { components: { ElTable, ElTableColumn, ElInput }, // 实现逻辑类似 }

2. VxeTable
```javascript
import VxeTable from 'vxe-table'

export default {
  components: {
    VxeTable
  },
  // 实现逻辑
}

性能优化建议

对于大数据量的表格查询，可以考虑以下优化措施：

• 使用虚拟滚动技术只渲染可见区域的行
• 对搜索添加防抖处理，避免频繁触发过滤计算
• 复杂查询条件可以考虑使用Web Worker在后台线程处理
• 考虑服务端分页和查询，减少前端数据处理压力

以上方案可以根据实际项目需求进行组合和调整，实现适合业务场景的表格查询功能。