vue element实现表格搜索

Vue Element 表格搜索实现方法

基础搜索功能实现

在Vue项目中结合Element UI的表格组件实现搜索功能，可以通过以下方式完成。假设有一个包含数据的表格，需要根据输入框内容进行筛选。

1. 模板部分代码

   

   <template>
   <div>
    <el-input v-model="searchQuery" placeholder="输入关键字搜索" style="width: 200px"/>
    <el-table :data="filteredData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
   </div>
   </template>

2. 脚本部分代码

   <script>
   export default {
   data() {
    return {
      tableData: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
      ],
      searchQuery: ''
    }
   },
   computed: {
    filteredData() {
      return this.tableData.filter(item => 
        item.name.includes(this.searchQuery) ||
        item.age.toString().includes(this.searchQuery)
      )
    }
   }
   }
   </script>

多条件高级搜索

对于需要多个搜索条件的场景，可以扩展搜索功能：

<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="searchForm.age" placeholder="年龄"></el-input>
      </el-form-item>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </el-form>

    <el-table :data="filteredData">
      <!-- 表格列定义 -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...], // 原始数据
      searchForm: {
        name: '',
        age: ''
      }
    }
  },
  methods: {
    handleSearch() {
      // 触发计算属性重新计算
      this.$forceUpdate()
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(item => {
        const nameMatch = item.name.includes(this.searchForm.name)
        const ageMatch = item.age.toString().includes(this.searchForm.age)
        return nameMatch && ageMatch
      })
    }
  }
}
</script>

远程搜索实现

当数据量较大时，可以采用后端接口搜索的方式：

methods: {
  async handleSearch() {
    try {
      const res = await this.$http.get('/api/data', {
        params: this.searchForm
      })
      this.tableData = res.data
    } catch (error) {
      console.error(error)
    }
  }
}

搜索优化技巧

1. 防抖处理减少请求频率

   
   import { debounce } from 'lodash'

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

2. 添加加载状态
```html
<el-table v-loading="loading" :data="tableData">

1. 空状态提示

   <el-table :data="filteredData">
   <template #empty>
    <el-empty description="暂无数据或未找到匹配结果"></el-empty>
   </template>
   </el-table>

以上方法可以根据实际项目需求进行组合和调整，实现适合业务的表格搜索功能。