vue实现列表页

Vue 实现列表页的方法

使用 v-for 指令渲染列表

Vue 的 v-for 指令可以遍历数组或对象，动态生成列表项。基本语法如下：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' }
      ]
    }
  }
}
</script>

从 API 获取数据

通常列表数据通过异步请求获取，可以使用 axios 或 fetch：

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    }
  },
  async created() {
    const response = await axios.get('https://api.example.com/items');
    this.items = response.data;
  }
}
</script>

添加分页功能

对于大量数据，可以结合分页组件实现分页加载：

<template>
  <div>
    <ul>
      <li v-for="item in paginatedItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
      <span>Page {{ currentPage }} of {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 假设已从API获取
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.items.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage);
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    }
  }
}
</script>

实现搜索和筛选

可以通过计算属性实现列表的搜索和筛选功能：

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

<script>
export default {
  data() {
    return {
      items: [], // 假设已从API获取
      searchQuery: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
}
</script>

使用 Vuex 管理状态

对于大型应用，可以使用 Vuex 集中管理列表数据：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    setItems(state, items) {
      state.items = items;
    }
  },
  actions: {
    async fetchItems({ commit }) {
      const response = await axios.get('https://api.example.com/items');
      commit('setItems', response.data);
    }
  }
});

<!-- 组件中使用 -->
<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['items'])
  },
  created() {
    this.fetchItems();
  },
  methods: {
    ...mapActions(['fetchItems'])
  }
}
</script>

性能优化

对于长列表，可以使用 vue-virtual-scroller 等虚拟滚动方案优化性能：

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="item">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

export default {
  components: {
    RecycleScroller
  },
  data() {
    return {
      items: [] // 假设已从API获取
    }
  }
}
</script>