如何使用vue element plus ui完成表格数据的动态加载

在Vue Element Plus UI中，你可以通过以下几个步骤来实现表格数据的动态加载：

1. **安装Element Plus和axios**：
首先，你需要在项目中安装Element Plus组件库和axios用于发送HTTP请求。在`package.json`中添加并运行`npm install element-plus axios`。

2. **引入依赖**：
在你的Vue组件文件中，导入需要的元素UI表格组件和axios：

<template>
  <el-table :data="tableData" :loading="loading" ref="tableRef">
    <!-- ... -->
  </el-table>
</template>

<script>
import { ElTable, ElLoading } from 'element-plus';
import axios from 'axios';
</script>

3. **定义状态变量**：
创建状态变量来存储表格的数据、加载状态以及分页等信息：

export default {
  data() {
    return {
      tableData: [],
      loading: false,
      currentPage: 1,
      pageSize: 10, // 每页显示的记录数
    };
  },
  // ...
};

4. **请求API获取数据**：
使用axios异步请求数据，通常会包含页码和每页大小作为查询参数。这里假设你的API接口为`'/api/data?page={{page}}&size={{pageSize}}'`：

methods: {
  fetchData() {
    this.loading = true;
    const url = `/api/data?page=${this.currentPage}&size=${this.pageSize}`;
    axios.get(url)
      .then((response) => {
        this.tableData = response.data; // 数据放在响应体中
        this.loading = false;
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
        this.loading = false;
      });
  },
}

5. **初始化数据加载**：
页面加载时，你可以默认加载第一页数据：

created() {
  this.fetchData();
},

6. **动态加载更多数据**：
当用户滚动到表格底部时，你可以触发新的数据加载：

mounted() {
  const tableRef = this.$refs.tableRef;
  if (tableRef) {
    tableRef.on('scroll', () => {
      const height = tableRef.$el.scrollHeight;
      const clientHeight = tableRef.$el.clientHeight;
      const scrollTop = tableRef.$el.scrollTop + clientHeight;

      if (scrollTop >= height - clientHeight) {
        this.loadMoreData();
      }
    });
  }
},

methods: {
  loadMoreData() {
    this.currentPage++;
    this.fetchData();
  },
},

现在，当用户滚动到表格底部时，表格将自动加载更多数据。记得根据实际需求调整分页策略和其他细节。