当前位置：首页 > VUE

vue列表查询实现

2026-01-08 04:40:52VUE

实现 Vue 列表查询功能

基础列表渲染 在 Vue 中可以通过 v-for 指令实现列表渲染，结合计算属性动态过滤数据：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索..." />
    <ul>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      originalList: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.originalList.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用 watch 实现异步查询 当需要从 API 获取数据时，可以使用 watch 监听查询条件变化：

vue列表查询实现

export default {
  data() {
    return {
      searchQuery: '',
      loading: false,
      resultList: []
    }
  },
  watch: {
    searchQuery(newVal) {
      this.debouncedSearch(newVal)
    }
  },
  created() {
    this.debouncedSearch = _.debounce(this.fetchData, 500)
  },
  methods: {
    async fetchData(query) {
      this.loading = true
      try {
        const res = await axios.get('/api/items', { params: { q: query } })
        this.resultList = res.data
      } finally {
        this.loading = false
      }
    }
  }
}

分页查询实现 结合分页组件实现完整查询功能：

vue列表查询实现

export default {
  data() {
    return {
      queryParams: {
        keyword: '',
        page: 1,
        pageSize: 10
      },
      total: 0,
      dataList: []
    }
  },
  methods: {
    async loadData() {
      const res = await api.getItems(this.queryParams)
      this.dataList = res.data.list
      this.total = res.data.total
    },
    handleSearch() {
      this.queryParams.page = 1
      this.loadData()
    }
  },
  mounted() {
    this.loadData()
  }
}

高级过滤功能 实现多条件复合查询：

computed: {
  filteredItems() {
    return this.items.filter(item => {
      return (
        (!this.filters.category || item.category === this.filters.category) &&
        (!this.filters.priceMin || item.price >= this.filters.priceMin) &&
        (!this.filters.priceMax || item.price <= this.filters.priceMax)
      )
    })
  }
}

性能优化建议