vue公共列表的实现

实现 Vue 公共列表组件

公共列表组件通常用于展示重复结构的数据，例如商品列表、用户列表等。以下是一个典型的实现方式：

基础实现

创建可复用的列表组件 List.vue：

<template>
  <div class="list-container">
    <div v-for="(item, index) in items" :key="getKey(index)" class="list-item">
      <slot :item="item" :index="index"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    },
    itemKey: {
      type: String,
      default: 'id'
    }
  },
  methods: {
    getKey(index) {
      return this.itemKey ? this.items[index][this.itemKey] : index
    }
  }
}
</script>

<style scoped>
.list-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

使用示例

在父组件中使用公共列表组件：

<template>
  <List :items="products" itemKey="productId">
    <template #default="{ item }">
      <div class="product-card">
        <h3>{{ item.name }}</h3>
        <p>价格: {{ item.price }}</p>
      </div>
    </template>
  </List>
</template>

<script>
import List from './List.vue'

export default {
  components: { List },
  data() {
    return {
      products: [
        { productId: 1, name: '商品A', price: 100 },
        { productId: 2, name: '商品B', price: 200 }
      ]
    }
  }
}
</script>

高级功能扩展

添加分页和加载状态支持：

<template>
  <div class="list-container">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-for="(item, index) in items" :key="getKey(index)" class="list-item">
      <slot :item="item" :index="index"></slot>
    </div>
    <div v-if="hasMore" class="load-more" @click="$emit('load-more')">
      加载更多
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    },
    itemKey: {
      type: String,
      default: 'id'
    },
    loading: {
      type: Boolean,
      default: false
    },
    hasMore: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    getKey(index) {
      return this.itemKey ? this.items[index][this.itemKey] : index
    }
  }
}
</script>

状态管理集成

结合 Vuex 或 Pinia 使用时：

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      items: state => state.products.list,
      loading: state => state.products.loading,
      hasMore: state => state.products.hasMore
    })
  },
  created() {
    this.$store.dispatch('products/fetchItems')
  }
}
</script>

性能优化

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

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id"
  >
    <template #default="{ item }">
      <slot :item="item"></slot>
    </template>
  </RecycleScroller>
</template>

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

export default {
  components: { RecycleScroller },
  props: {
    items: Array
  }
}
</script>

以上实现提供了从基础到高级的公共列表组件方案，可以根据实际需求选择合适的实现方式。