Vue table不分页 动态加载数据（类似手机端滑动到底端后再去获取数据）

已于 2022-11-07 13:09:18 修改
阅读量2k 收藏 7
点赞数
分类专栏： 笔记 文章标签： javascript html5 vue tablet
于 2021-08-27 10:50:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44754016/article/details/119935463
版权

最近接到一个需求，pc端中的table 数据不做分页，而是做成滚动条形式，但是table中的数据还是一次显示50条，等这50条滑动到底部后，再去加载50条（有加载效果），以此类推，直到数据全部展示。
值得注意的是： 我的需求是 第一次请求数据就将全部数据都获取到，后期的数据加载实际上是不走后台接口的，是纯前端数据处理

1、首先要确定 加载数据的时机是：table中的滚动条滑动到底部的时候

scrollEvent(event) {
      /**
       * 需要判断滚动条是否到达table底部，到达底部时才应该加载数据
       * $('.d-table .d-table-body')[0].clientHeight 为table的body部分的可视高度
       * $('.d-table .d-table-body')[0].scrollHeight 为table的body部分的实际的总高度
       * $('.d-table .d-table-body')[0].scrollTop 为table的body部分已滚动了多少高度
       * 可以用scrollTop + clientHeight == scrollHeight 判断滚动条是否到达了底部
       */
      if($('.d-table .d-table-body')[0].scrollTop + $('.d-table .d-table-body')[0].clientHeight == $('.d-table .d-table-body')[0].scrollHeight){
      // 因为我的table 是封装好的，所以下面这个操作是 调用父组件的scrollEvent事件
        this.$emit("scrollEvent");
      }      
    },

2、走接口获取到全部数据，将前五十条展示到table中，同时将全部数据存起来

/** 因为 我获取到的数据，做了一些循环处理，所以是push到了一个数据中，
    正常可以直接 将获取到的data 赋值给一个数据，我限
*/
 // 用于 制造用滚动条 滚动到底部获取数据的效果
 if(self.restoreDataViewData.recordResult.length < 50 ){
     // 获取数据，将前50条渲染到table 中
    self.restoreDataViewData.recordResult.push(cols);
}
//完整数据留存
self.restoreDataViewData.recordResultCopy.push(cols)

3、当滚动到底部后，触发事件，进行下一段50条数据的补充展示

scrollEvent(){
	  // 这是 全部数据
      let copy = this.restoreDataViewData.recordResultCopy
      // 这是 当前页面中table的展示数据
      let resu = this.restoreDataViewData.recordResult
      // 当展示数据和全部数据相同时，不再继续往下走了
      if(resu.length == copy.length) return
      // 计算 总数据可以分为几个50 ，向上取整
      let count =  Math.ceil(copy.length / 50 )
      // 计算 当前数据可以分为几个50，向上取整
      let currentCount = Math.ceil(resu.length / 50)
      // 若即将加载的数据 已经为最后一次加载，那么会出现 剩余未加载的数据不足50  这时取实际长度
      let leg = currentCount + 1 == count ? copy.length : (currentCount + 1)*50
      // 两个数据 对 50 的倍数相等，证明数据全部加载，不往下走了
      if(currentCount < count){
        // 自己封装的页面loading show
        Dynamics365.ShowCover();
        /** 加上定时器因为，此次数据加载的数据是已经请求过的，
          因此定时器维持loading状态，否则它就只会闪一下，
         如果这个地方要走接口，就不必如此 */
        var tableT = setTimeout(()=>{
          for(var i = currentCount*50; i<= leg - 1 ; i++){
            this.restoreDataViewData.recordResult.push(copy[i])
          }
          // 页面loading  hide
          Dynamics365.HideCover();
        },300)
      }
    },

在这里插入图片描述滚动条滑动到底部，触发获取数据的事件（类似翻页）

-----补充使用 InfiniteScroll 无限滚动（elementui） 实现上述效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            padding: 20px 100px;
            background-color: #F2F6FC;
        }

        li {
            list-style: none;
        }

        .topWarp {
            margin-bottom: 20px;
        }

        .head-box {
            height: 50px;
            line-height: 50px;
            background-color: #fff;
            padding-left: 10px;
            border: 1px solid #eee;
            border-radius: 5px;
        }

        .head-box .head-left {
            padding-left: 5px;
            border-right: 1px solid #eee;
        }

        .head-box .head-right {
            height: 100%;
            padding-left: 20px;
        }


        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }

        .expand-box {
            height: 300px;
            overflow: auto;
        }

        .expand-box .child-border {
            padding: 5px 10px;
            border-bottom: 2px solid #eee;
        }

        .expand-box .child-border .child-col {
            padding-bottom: 3px;
        }

        .scroll-footer {
            height: 2px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="topWarp">
            <el-row class="head-box">
                <el-col :span="4" class="head-left">TotalFiles : </el-col>
                <el-col :span="20" class="head-right">
                    {{jsonDateObj.TotalFiles}}
                </el-col>
            </el-row>
            <el-row class="head-box">
                <el-col :span="4" class="head-left">ScanLineCount : </el-col>
                <el-col :span="20" class="head-right">
                    {{jsonDateObj.ScanLineCount}}
                </el-col>
            </el-row>
            <el-row class="head-box">
                <el-col :span="4" class="head-left">ScanFileCount : </el-col>
                <el-col :span="20" class="head-right">
                    {{jsonDateObj.ScanFileCount}}
                </el-col>
            </el-row>
        </div>
        <el-table :data="tableDate" style="width: 100%; margin-top: 10px;" @expand-change="openRow">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <div class="expand-box" id="scrollExpand">
                        <div class="infinite-list-wrapper" style="overflow:auto">
                            <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
                                <li v-for="(item,index) in props.row.ReportDetails" class="list-item">
                                    <el-descriptions class="margin-top" :column="3" border>
                                        <template slot="title">
                                            <el-tag type="warning">
                                                数据{{index + 1}}
                                            </el-tag>
                                        </template>
                                        <el-descriptions-item>
                                            <template slot="label">
                                                <i class="el-icon-thumb"></i>
                                                Rule：
                                            </template>
                                            {{item.Rule}}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                            <template slot="label">
                                                <i class="el-icon-thumb"></i>
                                                LineIndex：
                                            </template>
                                            {{item.LineIndex}}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                            <template slot="label">
                                                <i class="el-icon-thumb"></i>
                                                LineCode:
                                            </template>
                                            {{item.LineCode}}
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                            <template slot="label">
                                                Ignore:
                                            </template>
                                            <el-tag size="small">
                                                <el-checkbox v-model="item.Ignore"></el-checkbox>
                                            </el-tag>
                                        </el-descriptions-item>
                                        <el-descriptions-item>
                                            <template slot="label">
                                                FileFullName：
                                            </template>
                                            {{item.FileFullName}}
                                        </el-descriptions-item>
                                    </el-descriptions>
                                </li>
                            </ul>
                            <p v-if="loading">加载中...</p>
                            <p v-if="noMore" style="text-align: center;">没有更多了</p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="Total" prop="Total">
            </el-table-column>
            <el-table-column label="Rule" prop="Rule">
            </el-table-column>
            <el-table-column label="Ignore" prop="Ignore">
                <template slot-scope="scope">
                    <el-tag type="success">
                        <el-checkbox v-model="scope.row.Ignore"></el-checkbox>
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                loading: false,
                count: 10,
                currentPage: 1,
                currentNum: 10,
                currentTableRow: {},
                jsonDate:
                {
                    "TotalFiles": 28613,
                    "ScanLineCount": 0,
                    "ScanFileCount": 2375,
                    "RportTypes": [
                        {
                            "Total": 0,
                            "Rule": "None",
                            "Ignore": false,
                            "ReportDetails": []
                        },
                        {
                            "Total": 1,
                            "Rule": "InsecureDeserialization",
                            "Ignore": false,
                            "ReportDetails": [
                                {
                                    "Rule": "InsecureDeserialization",
                                    "LineIndex": 34,
                                    "FileFullName": "C:\\Wor",
                                    "Message": null,
                                    "LineCode": "var sdf = new BinaryFormatter();",
                                    "Ignore": false
                                }
                            ]
                        },
                        {
                            "Total": 21282,
                            "Rule": "ExcludeSubFolder",
                            "Ignore": false,
                            "ReportDetails": [
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                }, {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                }, {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "ExcludeSubFolder",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "BlackList",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "BlackList",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "BlackList",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                },
                                {
                                    "Rule": "BlackList",
                                    "LineIndex": 0,
                                    "FileFullName": "C:\\Work",
                                    "Message": null,
                                    "LineCode": null,
                                    "Ignore": false
                                }
                            ]
                        },
                        {
                            "Total": 0,
                            "Rule": "Password",
                            "Ignore": false,
                            "ReportDetails": []
                        },
                        {
                            "Total": 0,
                            "Rule": "Connection",
                            "Ignore": false,
                            "ReportDetails": []
                        },
                        {
                            "Total": 0,
                            "Rule": "Tls",
                            "Ignore": false,
                            "ReportDetails": []
                        }

                    ]
                },
                jsonDateObj: {},
                tableDate: [],
            }
        },
        created() {
            this.jsonDateObj = JSON.parse(JSON.stringify(this.jsonDate));
            this.tableDate = this.jsonDateObj.RportTypes;
            this.tableDate.forEach((item, i) => {
                item.index = i;
                item.spliceReportDetails = item.ReportDetails;
            })
        },
        computed: {
            noMore() {
                let showCount = 0;
                this.jsonDateObj.RportTypes.forEach(item => {
                    if (item.index === this.currentTableRow.index) {
                        showCount = item.ReportDetails.length;
                    }
                })
                let allCount = 1;
                allCount = this.currentTableRow.spliceReportDetails.length;
                return showCount >= allCount;
            },
            disabled() {
                return this.loading || this.noMore
            }
        },
        methods: {
            // table 当前打开 行 的 数据
            openRow(row, expandedRows) {
                this.currentTableRow = row;
            },
            load() {
                this.loading = true
                setTimeout(() => {
                    this.jsonDateObj.RportTypes.forEach(item => {
                        if (item.index === this.currentTableRow.index) {
                            let start = item.ReportDetails.length;
                            let end = start + this.currentNum;
                            let slicDate = item.spliceReportDetails.slice(start, end);
                            item.ReportDetails.push(...slicDate);
                        }
                    })

                    this.tableDate = this.jsonDateObj.RportTypes;
                    this.loading = false
                }, 5000)
            }
        }
    })
</script>

</html>
玥光
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue+element-UI实现跟随滚动条加载表格数据
weixin_43822237的博客
07-21 2198
el-table当数据量大的时候，实现滚动到底部后加载数据，直接上js代码，有其他需求请各自更改。第二步、在数据发生改变的方法中先循环存放一部分数据用于页面显示。第三步、在mounted监听滚动事件。第一步、在data中定义两个数组。
vxe-table 启用虚拟滚动加载大数据表格
热门推荐
大猩猩X
05-12 1万+
vxe-table vxe-excel 实现 Excel 表格，增删改查 查看 Github 查看 Demo
【VUE】el-table表格 实现滚动到底部加载更多数据
cdd9527的博客
06-06 776
【VUE】el-table表格 实现滚动到底部加载更多数据
如何在Vue3中实现无限滚动加载数据列表
最新发布
有我更精彩的博客
06-20 864
在本文中，我们深入探讨了在 Vue3 中如何实现无限滚动加载数据列表。通过引入 Axios、Lodash，以及 Vue3 的组合式 API，我们能够高效、简洁地实现这一功能。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。
vue el-table表格数据,不分页,鼠标滚动实现数据懒加载
Seven71111的博客
10-13 9859
当前有一个需求，页面不分页，又想在一页显示全部数据，这个时候其实就可以用数据懒加载。 随鼠标滚动到滚动条末尾，自动加载下一页的数据。 create的时候默认加载20条数据 这里差不多到末端了 鼠标滑到末端后，触发加载第二页数据 代码实现： 先定义个table (getPageBodyHeight 方法是我通过页面自适应监听页面宽高变化，之前帖子有栗子，计算table的高度，简单点的可以自己设置固定高度) <el-table border .
vue滚动加载数据
weixin_42371812的博客
08-21 3428
在做移动端业务的时候，经常需要对数据进行滚动加载。所谓的滚动加载，其实就是像小程序那样的，触底加载数据。别听的字里行间听的那么高大上。当然，对于滚动加截，常见的也就跟我们在PC端的分页的业务逻辑是一样的。滚动到底部的时候请求一次（或者在PC端来说是点击下一页），都是一样的意思。滚动加载，它的主要逻辑就是监听winow的滚动事件，滚动到页面底部的时候执行数据请求的方法就完事了。下面，我这儿的是纯前端处理的滚动加载（也可以说是分页）都是一样的意思。然而，对于分页，我之前的博文也有介绍过，
ant design vue中table表格滚动加载
weixin_71329368的博客
07-17 3858
在ant design vue组件库中，并没有提供可以直接监听table滚动的api，在此我使用了原生js去对table表格赋予一个监听表格滚动事件。在处理一写数据量特别大的情况下，我们不能把后端的数据一次性全部拿到前端在table表格中展示，为了考虑性能优化，使用了滚动加载表格数据。做这个功能之前，我们首先需要获取到table滚动到底部或者顶部时去触发方法。首先我想要对表格进行滚动加载，接口需要我传递的数据为行数，传递了行数来规定从第几行开始返回部分数据，具体返回数据的条数需要根据接口来定。
数据太多，页面加载太慢怎么办
前端小陈的成长记录
05-26 1228
分组渲染
VUE学习（四）el-table的替代品vxe-table使用
easyboot的专栏
12-09 1596
使用el-table加载数据量稍微大点，就会卡顿。搜索后发现vxe-table比较好用。2.main.js 中加入。1.github地址。
vue 实现滚动到底部翻页效果(pc端)
10-16
在Vue.js中，实现PC端滚动到底部自动加载更多数据（翻页效果）是一种常见的优化用户体验的方法，尤其在处理大量列表数据时。这种效果通常被称为“无限滚动”或“滚动加载”。以下是一个详细的实现步骤： 1. **HTML...
vue+Element-ui实现分页效果实例代码详解
10-17
在Web开发中，分页是一种常见的功能，用于展示大量的数据，避免一次性加载过多内容导致页面卡顿。Vue.js是一个轻量级的前端框架，它结合Element UI库可以轻松实现高效的分页效果。Element UI提供了丰富的组件，其中...
vxe-table::dolphin: vxe-table vue 表格解决方案
05-11
一个基于的PC端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等... 设计理念 面向现代...
vue结合swiper实现演示--鼠标控制
12-30
在本文中，我们将深入探讨如何使用Vue.js框架与Swiper库结合，实现一个创新的鼠标控制功能，使得页面向下滚动时以卡片式效果呈现。Vue.js是一个轻量级的前端框架，它允许开发者构建可复用组件，提高开发效率。而...
repeat分页
05-14
"Repeat分页"是一种在网页或应用程序中实现数据分页的常见技术，它允许用户以交互的方式逐页浏览大量信息，提高用户体验并减轻服务器压力。Repeat分页通常应用于数据库查询结果、电商产品列表或者论坛帖子等场景，...
vue最强table vxe-table 虚拟滚动列表 前端导出
jmszl1991的博客
07-06 1万+
vue table万能组件
【vue】实现滚动条滚动到底部时发送请求获取数据
叶子yes的博客
01-19 2174
当后端给我们一个分页获取数据的接口时，我们前端可以通过设置分页按钮来获取到所有的数据，也可以通过判断滚动条位置，当滚动条滚动到底部时就发送请求获取下一页的数据，这样我们就可以不设置分页按钮也能获取到所有的数据。
滑动到页面底部，继续显示数据在页面（以Vue为例）
泡芙牛牛
09-14 735
滑动到页面底部，继续显示数据在页面（以Vue为例）
dataTable关闭分页详解
QINGZHID的博客
06-15 1196
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
Vue 中利用 el-table 实现懒加载的数据表格
pleaseprintf的博客
06-22 6642
在使用 Vue 开发时，当数据量较大时，为了提高页面加载和渲染的性能，我们可以采用懒加载的方式，即在 el-table（element-ui 的表格组件）上实现懒加载。本文将详细介绍在 Vue 中如何利用 el-table 实现懒加载的方法，帮助您优化页面性能并提升用户体验。通过在 Vue 中利用 el-table 实现懒加载，我们可以优化页面性能，提高用户体验。通过分页获取数据、监听滚动事件、加载下一页数据和动态渲染表格数据，实现了 el-table 的懒加载功能。
vue 的table数据重复加载_vue-easytable分页加载大量数据
06-09
对于Vue的table数据重复加载和Vue-easytable分页加载大量数据的问题，我给出以下建议： 1. 对于Vue的table数据重复加载问题，可以考虑使用v-if指令来控制是否显示table，以避免重复加载。例如，可以在获取数据成功...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值