vue 搜索table表格数据

Vue搜索table表格数据的实现方式与搜索普通数据的方式类似，只是需要对table进行处理。以下是一个简单的实现示例：

<template>
  <div>
    <input v-model="keyword" type="text" placeholder="请输入关键词">
    <button @click="search">搜索</button>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in searchResult" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.description }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      tableData: [
        { id: 1, name: '数据1', description: '这是数据1的描述' },
        { id: 2, name: '数据2', description: '这是数据2的描述' },
        { id: 3, name: '数据3', description: '这是数据3的描述' },
      ],
      searchResult: []
    }
  },
  methods: {
    search() {
      this.searchResult = this.tableData.filter(item => {
        // 判断关键词是否在名称或描述中出现
        return item.name.indexOf(this.keyword) !== -1 || item.description.indexOf(this.keyword) !== -1
      })
    }
  }
}
</script>

在实际开发中，还需要考虑如何处理分页、排序等需求。可以使用插件或自行编写代码实现。