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>这些方法可以根据具体需求组合使用，构建灵活高效的公共列表组件。
