当前位置：首页 > VUE

vue实现列表组件

2026-01-17 04:48:40VUE

Vue 列表组件实现方法

基础列表渲染

使用 v-for 指令渲染数组数据，需配合 :key 提升性能：

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

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

动态列表属性

通过计算属性实现过滤或排序：

computed: {
  filteredItems() {
    return this.items.filter(item => item.active)
  }
}

分页功能实现

结合分页逻辑与列表渲染：

data() {
  return {
    currentPage: 1,
    itemsPerPage: 5
  }
},
computed: {
  paginatedItems() {
    const start = (this.currentPage - 1) * this.itemsPerPage
    return this.items.slice(start, start + this.itemsPerPage)
  }
}

拖拽排序功能

使用 vuedraggable 插件实现：

<draggable v-model="items" @end="onDragEnd">
  <div v-for="item in items" :key="item.id">
    {{ item.name }}
  </div>
</draggable>

无限滚动加载

监听滚动事件加载更多数据：

methods: {
  handleScroll() {
    const bottom = window.innerHeight + window.scrollY >= document.body.offsetHeight
    if (bottom && !this.loading) {
      this.loadMore()
    }
  }
}

性能优化技巧

对于大型列表使用虚拟滚动：

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

组件化设计

将列表项提取为独立组件：

vue实现列表组件

<template>
  <ul>
    <ListItem 
      v-for="item in items"
      :key="item.id"
      :item="item"
      @delete="handleDelete"
    />
  </ul>
</template>