vue实现列表查询功能

实现列表查询功能的基本步骤

在Vue中实现列表查询功能通常涉及数据绑定、事件处理和API调用。以下是具体实现方法。

数据绑定与列表渲染

使用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>

处理查询逻辑

通过计算属性filteredList实现实时过滤，避免频繁触发方法调用。

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

异步数据加载

结合axios或fetch从后端API获取数据，并处理加载状态。

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchQuery: '',
      items: [],
      isLoading: false
    }
  },
  async created() {
    this.isLoading = true;
    try {
      const response = await axios.get('/api/items');
      this.items = response.data;
    } catch (error) {
      console.error(error);
    } finally {
      this.isLoading = false;
    }
  },
  computed: {
    filteredList() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

优化查询性能

对于大数据量列表，使用防抖（debounce）减少频繁查询带来的性能问题。

<script>
import _ from 'lodash';

export default {
  data() {
    return {
      searchQuery: '',
      items: []
    }
  },
  created() {
    this.debouncedFilter = _.debounce(this.fetchItems, 300);
  },
  watch: {
    searchQuery() {
      this.debouncedFilter();
    }
  },
  methods: {
    async fetchItems() {
      const response = await axios.get('/api/items', {
        params: { q: this.searchQuery }
      });
      this.items = response.data;
    }
  }
}
</script>

分页处理

结合分页组件实现大数据量分页查询，减轻前端渲染压力。

<template>
  <div>
    <input v-model="searchQuery" @input="fetchItems" />
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="prevPage" :disabled="page === 1">上一页</button>
    <span>当前页: {{ page }}</span>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [],
      page: 1,
      pageSize: 10
    }
  },
  methods: {
    async fetchItems() {
      const response = await axios.get('/api/items', {
        params: {
          q: this.searchQuery,
          page: this.page,
          size: this.pageSize
        }
      });
      this.items = response.data;
    },
    nextPage() {
      this.page++;
      this.fetchItems();
    },
    prevPage() {
      if (this.page > 1) {
        this.page--;
        this.fetchItems();
      }
    }
  }
}
</script>

样式与交互优化

添加加载状态提示和空数据提示，提升用户体验。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索..." />
    <div v-if="isLoading">加载中...</div>
    <ul v-else>
      <li v-for="item in filteredList" :key="item.id">
        {{ item.name }}
      </li>
      <li v-if="filteredList.length === 0">暂无数据</li>
    </ul>
  </div>
</template>