Vue element-ui表格数据懒加载

最新推荐文章于 2024-10-22 18:00:21 发布

fool_dawei

最新推荐文章于 2024-10-22 18:00:21 发布

阅读量1.3w

点赞数 11

分类专栏： ElementUI使用记录文章标签： vue表格懒加载 element-ui表格

本文链接：https://blog.csdn.net/m0_37893932/article/details/107333312

版权

本文介绍了如何使用Vue和Element-UI实现表格数据的懒加载功能。通过监听DOM的scroll事件，当滚动到表格底部时触发加载更多数据。详细步骤包括在main.js中引入Element-UI，新建Table.vue组件并实现tableListener方法，以及在App.vue中引用子组件并展示数据加载效果。

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

大部分参考Angrybird233的简书文章，自己细节实现一下

引入element-ui

npm 的方式安装 element-ui

npm i element-ui -S

在 main.js 中写入以下内容：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

新建Table.vue

主要就是tableListener()方法，监听dom的scroll事件
dom.scrollHeight - dom.scrollTop - dom.clientHeight = 0代表滚动到表格底部

<template>
    <div id="app">
        <el-table
                :data="tableData"
                style="width: 100%"
                height="250"
                ref="myTable">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱">
            </el-table-column>
            <el-table