在Vue中使用Vant组件库创建一个带有横向滚动条的表格，你可以使用van-tabs组件结合van-tab来展示不同的标签页内容，并使用van-list组件来实现横向滚动的表格。以下是一个简单的例子：
<template>
<van-tabs v-model="activeTab">
<van-tab v-for="index in 5" :title="'标签 ' + index" :key="index">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell-group>
<van-cell v-for="item in list" :key="item" :title="'项目 ' + item" />
</van-cell-group>
</van-list>
</van-tab>
</van-tabs>
</template>
<script>
export default {
data() {
return {
activeTab: 0,
loading: false,
finished: false,
list: [],
};
},
methods: {
onLoad() {
// 加载更多数据
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
this.loading = false;
// 数据全部加载完成
if (this.list.length >= 50) {
this.finished = true;
}
}, 1000);
},
},
};
</script>在这个例子中，van-tabs组件用于创建带有标签页的容器，每个van-tab代表一个标签页。van-list组件用于实现横向滚动加载更多数据，van-cell-group和van-cell则用于展示表格内容。通过控制list数组的长度和内容，你可以模拟加载更多数据的效果，当数据加载完成时，会显示"没有更多了"的提示信息。