vue实现搜索表格

Vue实现搜索表格的方法

数据绑定与表格渲染

使用v-model绑定搜索输入框的值，结合计算属性动态过滤表格数据。示例代码：

<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)
      )
    }
  }
}
</script>

多字段搜索

扩展计算属性实现多列联合搜索：

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

使用第三方组件

对于复杂需求可结合element-ui等UI库：

<el-input v-model="searchQuery"></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>

性能优化

大数据量时考虑分页或防抖处理：

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function() {
    // 搜索逻辑
  }, 300)
}

服务端搜索

当数据量极大时，应改为API请求：

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