当前位置：首页 > VUE

vue实现的表格搜索

2026-02-22 01:37:16VUE

vue实现的表格搜索

Vue 表格搜索实现方法

基础实现（基于本地数据过滤）

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <table>
      <tr v-for="item in filteredItems" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.email }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '张三', email: 'zhang@example.com' },
        { id: 2, name: '李四', email: 'li@example.com' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
               item.email.toLowerCase().includes(this.searchQuery.toLowerCase())
      })
    }
  }
}
</script>

使用 Lodash 进行防抖优化

<script>
import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: [],
      allItems: [] // 原始数据
    }
  },
  created() {
    this.debouncedFilter = debounce(this.filterItems, 300)
  },
  watch: {
    searchQuery() {
      this.debouncedFilter()
    }
  },
  methods: {
    filterItems() {
      if (!this.searchQuery) {
        this.items = [...this.allItems]
        return
      }
      this.items = this.allItems.filter(item => 
        Object.values(item).some(val =>
          String(val).toLowerCase().includes(this.searchQuery.toLowerCase())
        )
      )
    }
  }
}
</script>

服务器端搜索实现

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [],
      loading: false
    }
  },
  watch: {
    searchQuery(newVal) {
      this.fetchItems(newVal)
    }
  },
  methods: {
    async fetchItems(query) {
      this.loading = true
      try {
        const response = await axios.get('/api/items', {
          params: { q: query }
        })
        this.items = response.data
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

多条件高级搜索实现

<template>
  <div>
    <input v-model="searchParams.name" placeholder="姓名">
    <input v-model="searchParams.email" placeholder="邮箱">
    <select v-model="searchParams.status">
      <option value="">所有状态</option>
      <option value="active">活跃</option>
      <option value="inactive">非活跃</option>
    </select>

    <table>
      <tr v-for="item in filteredItems" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.email }}</td>
        <td>{{ item.status }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchParams: {
        name: '',
        email: '',
        status: ''
      },
      items: []
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return (
          (this.searchParams.name === '' || 
           item.name.toLowerCase().includes(this.searchParams.name.toLowerCase())) &&
          (this.searchParams.email === '' || 
           item.email.toLowerCase().includes(this.searchParams.email.toLowerCase())) &&
          (this.searchParams.status === '' || 
           item.status === this.searchParams.status)
        )
      })
    }
  }
}
</script>

使用第三方表格组件（如 Element UI）

<template>
  <el-input v-model="searchQuery" placeholder="搜索"></el-input>
  <el-table :data="filteredItems">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="email" label="邮箱"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: []
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        !this.searchQuery ||
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
        item.email.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>