如何实现elementui中固定表头的表格滚动到底部后加载更多

要实现这个功能，你可以使用 element-ui 的表格组件，并在其中使用一个带有滚动条的容器包裹。然后，你需要监听这个容器的滚动事件，判断是否滚动到了底部，如果滚动到了底部，则触发加载更多的操作。

以下是实现步骤：

1. 在 template 中使用 el-table 组件，并将其包裹在一个带有滚动条的容器中，例如 el-scrollbar 组件。

<el-scrollbar style="height: 300px;">
  <el-table :data="tableData" style="width: 100%">
    <!-- 表格列定义 -->
  </el-table>
</el-scrollbar>

2. 在 script 中定义 data，其中包含一个变量 isScrollEnd，表示是否滚动到了底部。

export default {
  data() {
    return {
      tableData: [], // 表格数据
      isScrollEnd: false // 是否滚动到了底部
    }
  },
  mounted() {
    // 监听滚动事件
    const el = this.$el.querySelector('.el-scrollbar__wrap')
    el.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 处理滚动事件，判断是否滚动到了底部
    handleScroll() {
      const el = this.$el.querySelector('.el-scrollbar__wrap')
      const scrollBottom = el.scrollHeight - el.scrollTop - el.clientHeight
      if (scrollBottom <= 0) {
        this.isScrollEnd = true
      } else {
        this.isScrollEnd = false
      }
    },
    // 加载更多数据
    loadMore() {
      // TODO: 实现加载更多数据的逻辑
    }
  }
}

3. 在表格的底部添加一个“加载更多”按钮，并根据 isScrollEnd 的值来控制它的显示状态。

<el-scrollbar style="height: 300px;">
  <el-table :data="tableData" style="width: 100%">
    <!-- 表格列定义 -->
  </el-table>
  <div v-if="isScrollEnd">
    <el-button @click="loadMore">加载更多</el-button>
  </div>
</el-scrollbar>

4. 实现 loadMore 方法，在其中加载更多数据，并更新表格数据。

methods: {
  // 处理滚动事件，判断是否滚动到了底部
  handleScroll() {
    const el = this.$el.querySelector('.el-scrollbar__wrap')
    const scrollBottom = el.scrollHeight - el.scrollTop - el.clientHeight
    if (scrollBottom <= 0) {
      this.isScrollEnd = true
      this.loadMore()
    } else {
      this.isScrollEnd = false
    }
  },
  // 加载更多数据
  loadMore() {
    // 加载更多数据的逻辑，例如使用 axios 获取数据
    axios.get('/api/getMoreData').then(res => {
      this.tableData = this.tableData.concat(res.data)
    })
  }
}

这样，当用户滚动到表格底部时，就会触发加载更多的操作，并动态更新表格数据。