vue公共列表的实现

Vue公共列表的实现方法

公共列表在Vue中通常指可复用的列表组件，用于展示数据集合。以下是几种常见的实现方式：

基础列表组件实现

创建可复用的列表组件，通过props接收数据：

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

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

使用插槽增强灵活性

通过插槽允许父组件自定义列表项渲染：

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

结合Vuex管理状态

当列表数据需要全局共享时，可以使用Vuex：

// store.js
export default new Vuex.Store({
  state: {
    listItems: []
  },
  mutations: {
    updateList(state, payload) {
      state.listItems = payload
    }
  }
})

动态加载数据

结合API请求实现动态数据加载：

export default {
  data() {
    return {
      items: [],
      loading: false
    }
  },
  methods: {
    async fetchItems() {
      this.loading = true
      try {
        const response = await axios.get('/api/items')
        this.items = response.data
      } finally {
        this.loading = false
      }
    }
  },
  created() {
    this.fetchItems()
  }
}

分页功能实现

添加分页支持：

export default {
  data() {
    return {
      items: [],
      currentPage: 1,
      totalPages: 0,
      perPage: 10
    }
  },
  methods: {
    async fetchItems() {
      const response = await axios.get('/api/items', {
        params: {
          page: this.currentPage,
          per_page: this.perPage
        }
      })
      this.items = response.data.items
      this.totalPages = response.data.total_pages
    },
    changePage(page) {
      this.currentPage = page
      this.fetchItems()
    }
  }
}

虚拟滚动优化性能

对于大型列表，使用虚拟滚动提高性能：

<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
  },
  props: {
    items: Array
  }
}
</script>

这些方法可以根据具体需求组合使用，构建灵活高效的公共列表组件。