vue3表格无限滚动el-table-infinite-scroll

最新推荐文章于 2025-04-03 09:21:26 发布

bluejad

最新推荐文章于 2025-04-03 09:21:26 发布

阅读量1.1k

点赞数

文章标签： vue.js elementui javascript

原文链接：https://blog.csdn.net/m0_61382303/article/details/131243183

版权

本文介绍了如何在Vue应用中使用ElementUI的el-table组件实现无限滚动加载数据的功能，展示了如何设置表格列和处理数据加载的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <el-table
      :data="tableData"
      v-el-table-infinite-scroll="load"
      style="width: 100%"
      height="200px"
    >
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>
<script setup>
import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
import { reactive } from "vue";
 
const load = (res) => {
  console.log(res, "load");
  tableData.push(...tableData);
};
const tableData = reactive([
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-08",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-06",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
]);
</script>
 
<style scoped></style>