el-tree底部加载更多数据

要实现el-tree底部加载更多数据，可以采取以下步骤：

1. 在el-tree组件中添加一个底部插槽，用于显示“加载更多”按钮。

2. 在data中添加一个变量，用于表示当前数据加载的状态。

3. 在methods中添加一个方法，用于处理“加载更多”按钮的点击事件。

4. 在该方法中，通过异步请求加载更多数据，并将其追加到原有数据中。

5. 在el-tree的props中添加一个属性，用于控制每次加载的数据量。

6. 在mounted生命周期钩子函数中，初始化数据，并监听滚动事件，当滚动到底部时触发“加载更多”事件。

下面是示例代码：

<template>
  <el-tree :data="treeData" :load="loadNode" @node-click="handleClick">
    <template #bottom>
      <div v-if="loading">加载中...</div>
      <div v-else>
        <el-button type="primary" @click="loadMore">加载更多</el-button>
      </div>
    </template>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [],
      loading: false,
      pageSize: 10, // 每次加载的数据量
      pageNo: 1 // 当前页数
    };
  },
  methods: {
    async loadMore() {
      this.loading = true;
      const res = await axios.get(`/api/getData?pageNo=${this.pageNo}&pageSize=${this.pageSize}`);
      this.treeData = this.treeData.concat(res.data);
      this.pageNo++;
      this.loading = false;
    },
    handleClick(data) {
      console.log(data);
    },
    async loadNode(node, resolve) {
      // 异步加载节点数据
    }
  },
  mounted() {
    this.loadMore();
    window.addEventListener('scroll', () => {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      if (scrollTop + clientHeight >= scrollHeight - 20 && !this.loading) {
        this.loadMore();
      }
    });
  }
};
</script>