vue3 中表格el-table-infinite-scroll 插件使用

摇头的金丝猴

已于 2023-06-16 11:22:28 修改

阅读量2k

点赞数 1

文章标签： vue.js javascript

于 2023-06-16 11:19:13 首次发布

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

版权

该文章演示了如何在Vue3应用中使用el-table-infinite-scroll插件来实现表格的无限滚动功能。通过安装npm包，导入并注册组件，然后在模板中配置，当用户滚动到表格底部时，会触发load函数进行更多数据的加载。示例代码展示了如何结合响应式数据绑定和事件监听来更新表格数据。

摘要由CSDN通过智能技术生成

1.安装vue3npm包

npm install --save el-table-infinite-scroll

2.mian.js

import { createApp } from "vue";
import App from "./src/App.vue";

import ElTableInfiniteScroll from "el-table-infinite-scroll";

const app = createApp(App);

app.use(ElTableInfiniteScroll);
app.mount("#app");

3.组件表使用

<template>
  <el-table v-el-table-infinite-scroll="load"></el-table>
</template>

<script setup>
import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
</script>

domo

<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>

官网地址

vue3 | el-table-infinite-scroll