vue 点击展开表格树，先输出100条数据，然后 每隔一秒输出100条数据

在Vue.js中，实现点击展开表格树并分批加载数据的功能，可以采用递归组件和v-for循环结合`v-if`条件、`async`和`await`来实现异步加载。首先，假设你有一个列表数组`dataList`，包含部分已加载的数据和一个`totalCount`表示总记录数。

1. 定义一个递归组件（如`TableTreeItem`），用于渲染每一项数据和一个标志变量`isLoaded`来跟踪是否已经加载：

<template>
  <li v-if="item.isLoaded">
    <div>{{ item.data }}</div>
    <!-- 展开按钮 -->
    <button @click="loadMore(item)">展开更多</button>
  </li>
  <ul v-if="item.children && !item.isLoaded">
    <table-tree-item v-for="(child, index) in item.children" :key="index"></table-tree-item>
  </ul>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  methods: {
    loadMore(item) {
      this.$axios.get(`/api/loadMore/${item.id}`)
        .then(response => {
          item.children = response.data.slice(0, 100);
          item.isLoaded = true;
        })
        .catch(err => console.error('Error loading more data:', err));
    }
  }
};
</script>

2. 在父组件中初始化数据，初始时只显示前100条，并在点击“展开更多”按钮时触发`loadMore`方法：

<template>
  <div>
    <table-tree-item v-for="(parentItem, index) in dataList.slice(0, 100)" :key="index"></table-tree-item>
  </div>
</template>

<script>
import TableTreeItem from './TableTreeItem.vue';

export default {
  components: {
    TableTreeItem,
  },
  data() {
    return {
      dataList: [
        // 初始化数据
        { id: 1, data: '第一条', children: [] },
        // ...
      ],
      totalCount: 200, // 总记录数
    };
  },
  methods: {
    async loadChildren(parentItem) {
      const response = await this.$axios.get(`/api/data?parentId=${parentItem.id}`);
      parentItem.children = response.data.slice(0, 100);
      // 如果还有未加载的部分，则继续请求
      if (response.data.length > 100 && response.data.length <= this.totalCount) {
        this.loadChildren(response.data[100]);
      }
    },
    onLoadData() {
      this.loadChildren(this.dataList[0]);
    },
    async mounted() {
      this.onLoadData();
    },
  },
};
</script>

当用户点击“展开更多”，会通过递归的方式依次加载剩余的数据，每秒加载100条直到达到总数。注意这里的异步操作需要处理好取消订阅或错误处理，这里仅做示例展示。