当前位置：首页 > VUE

vue实现搜索表格

2026-03-10 10:42:44VUE

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>

多字段搜索

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

vue实现搜索表格

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

vue实现搜索表格

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

标签: 表格 vue

分享给朋友：

vue实现帖子

Vue 实现帖子功能使用 Vue 实现帖子功能需要结合前端框架和后端数据交互，以下是实现的关键步骤和代码示例。帖子列表展示创建帖子列表组件，使用 v-for 渲染帖子数据，通过 axios 获…

vue 实现blog

Vue 实现博客的基本步骤使用 Vue 实现博客可以分为前端和后端两部分，前端使用 Vue.js 框架，后端可以选择 Node.js、Python 或其他服务端语言。以下是一个基于 Vue 的博客实…

vue实现handsontable

Vue 中实现 Handsontable 要在 Vue 项目中集成 Handsontable，可以使用官方提供的 @handsontable/vue 封装库。以下是一个完整的实现步骤。安装依赖确…

vue实现selectable

Vue 实现可选择的 Select 组件在 Vue 中实现一个可选择的 Select 组件，可以通过以下几种方式：使用原生 HTML select 元素 <template> &…

vue sku 实现

Vue SKU 实现方案在电商系统中，SKU（Stock Keeping Unit）是商品的最小库存单位，通常由多个属性组合而成（如颜色、尺寸等）。以下是基于 Vue 的实现方案。数据结构设计…

vue实现回复

Vue 实现回复功能在 Vue 中实现回复功能通常涉及前端表单交互、数据绑定和后端通信。以下是实现回复功能的详细步骤：数据绑定与表单设计使用 Vue 的 v-model 绑定回复框的输入内容，…

vue实现搜索表格