vue+vant移动端显示table表格加横向滚动条

在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数组的长度和内容，你可以模拟加载更多数据的效果，当数据加载完成时，会显示"没有更多了"的提示信息。