vue实现列表页面

Vue 实现列表页面的方法

数据绑定与列表渲染

使用 v-for 指令实现列表渲染，绑定数据源到模板。假设数据从后端 API 获取：

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

<script>
export default {
  data() {
    return {
      items: [] // 初始为空数组
    }
  },
  async created() {
    const response = await fetch('/api/items');
    this.items = await response.json();
  }
}
</script>

分页功能实现

结合分页组件和计算属性实现分页逻辑：

<template>
  <div>
    <ul>
      <li v-for="item in paginatedItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="currentPage--" :disabled="currentPage === 1">上一页</button>
    <span>第 {{ currentPage }} 页</span>
    <button @click="currentPage++" :disabled="currentPage >= totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage);
    },
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.items.slice(start, end);
    }
  }
}
</script>

搜索过滤功能

添加搜索框并通过计算属性实现实时过滤：

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

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

使用第三方组件库

借助 Element UI 或 Vuetify 等组件库快速实现：

<template>
  <el-table :data="items" style="width: 100%">
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="date" label="日期"></el-table-column>
  </el-table>
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="10"
    :total="totalItems">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      totalItems: 0
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    async fetchData() {
      const res = await axios.get(`/api/items?page=${this.currentPage}`);
      this.items = res.data.items;
      this.totalItems = res.data.total;
    }
  }
}
</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: [] // 大数据量数组
    }
  }
}
</script>