实现分页数据请求的思路/Element UI(Plus)的分页模板（Vue3.x写法），（直接使用<script>引入vue.js）

1. 效果图：

2.实现分页数据请求的思路：

  分页面对的场景是大量的数据导致渲染速度慢，甚至出现卡顿、掉帧。因此引入分页组件后，我们需要考虑如何将数据与分页相结合。

思路一：前端在请求数据时不请求全部的数据，而是带上分页大小、页码等限定条件。

优点 缺点
每一次请求的数据量小，初次渲染速度更快。 每次执行切换页面等操作都会请求数据，对服务器端要求高。

思路二：前端在请求数据时请求全部的数据，服务器端将数据整理成JSON或其他格式，便于前端根据索引分块使用。

优点 缺点
不需要反复请求数据，每次执行切换页面等操作渲染速度更快。 初次请求数据量大，遇到异常巨大的数据量时，初次渲染速度慢。

  我的想法是在数据量不是异常大的情况下选思路一，数据量异常大的情况下两种思路结合，在不明显影响数据渲染速度的前提下，每次请求数据都尽可能的大。

3. 模板代码如下（注意和vue2的写法有一点儿不一样）：

<!DOCTYPE html>

<html lang="ch">

<head>

    <meta charset="UTF-8">

    <meta name ="viewport" content ="width = device-width" />

    <title>gxg</title>

    <!-- 导入样式 -->

    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />

    <!-- 导入 Vue 3 -->

    <script src="//unpkg.com/vue@next"></script>

    <!-- 导入组件库 -->

    <script src="//unpkg.com/element-plus"></script>

    <style lang="css">

        [v-cloak]{

            display: none;

        }

    </style>

</head>

<body>

    <div id="gxg" v-cloak>

      <el-pagination

         :default-page-size=100

         :page-sizes="[100, 200, 300, 400]"

         :small="small"

         :disabled="disabled"

         :background="true"

         layout="total, sizes, prev, pager, next, jumper"

         :total="total"

         @size-change="handleSizeChange"

         @current-change="handleCurrentChange"

        />

    </div>

	<script type="text/javascript">

        var count = 0;

        var Main = {

                data() {

                    return {

                        total : 0

                    }

                },

                methods: {

                    change(count){

                       this.total=count;

                    },

                    handleSizeChange(val){

                       console.log('分页大小：'+val);//分页大小发生改变时，触发此函数

                    },

                    handleCurrentChange(val) {

                       console.log('切换到第'+val+'页');//页码发生改变时，触发此函数

                    }

               //上述两个事件，官方并不太支持，后续也将删除，官方更加推荐使用v-model双向绑定

                }

        };

        const gxg = Vue.createApp(Main);

        gxg.use(ElementPlus);

        GXG = gxg.mount("#gxg");

        GXG.change(1000);//这里将总数据量传入

	</script>

</body>

</html>

实现分页数据请求的思路/Element UI(Plus)的分页模板（Vue3.x写法），（直接使用<script>引入vue.js）的更多相关文章

  1. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  2. 微信小程序初探（二、分页数据请求）

    大家好 波哥小猿又来啦[斜眼笑],昨天咱们讲了微信小程序简单数据请求,有没有照着教程实现请求的同学们啦 实现的同学举个爪[笑脸].哈哈,好了不扯犊子啦,我相信有的同学已经实现了简单的数据请求,没有实现 ...

  3. vue+element ui项目总结点（四）零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  4. element ui里面table分页,页数从0开始的怎么做？

    需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...

  5. 基于element ui的图片预览插件

    写插件很简单,满足两个条件即可,一.基本的逻辑思路,二.熟悉插件语法要求.本次Vue插件也比较简单,点击“查看图片”用轮播的方式限制用户上传的图片,如图: 项目采用的是vue-element-admi ...

  6. Mybatis oracle多表联合查询分页数据重复的问题

    Mybatis oracle多表联合查询分页数据重复的问题 多表联合查询分页获取数据时出现一个诡异的现象:数据总条数正确,但有些记录多了,有些记录却又少了甚至没了.针对这个问题找了好久,最后发现是由于 ...

  7. [转]vue Element UI走马灯组件重写

    https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

  8. 2021新年 Vue3.0 + Element UI 尝鲜小记

    2021年,又是新的一年,Vue 已经发布 3.0 版本,最好用的 UI 组件库 Element UI 也发布了适配 Vue3.0 的新版本,是时候开始学习一下这两个新技术. 本文主要记录了使用 Vu ...

  9. Vue.js 开发实践：实现精巧的无限加载与分页功能

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...

  10. [译]基于Vue.js的10个最佳UI框架，用于构建移动应用程序

    原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...

随机推荐

  1. flask相关

    app使用flask_session pip install flask_session from flask_session import Session app = Flask(__name__) ...

  2. 在docker容器外，使用docker容器中的环境

    docker exec -it 334529194f22 /bin/bash -c 'pip install requests-2.22.0-py2.py3-none-any.whl' 其中33452 ...

  3. C++数组（一）：一维数组

    C++一维数组 C++数组的定义方式 数据类型 数组名[数组长度]; 例子:int arr[3]; arr[0] = 1; arr[1] = 2; arr[2] = 3; 数据类型 数组名[数组长度] ...

  4. 7. mixin的实现原理

    mixin的实现原理 在Vue.mixin()中的内容会被维护到Vue.options静态属性里面 然后通过mergeOptions以特定的合并策略将全局的属性和用户属性合并起来 在获取用户选项的时候 ...

  5. Typora的一些基础用法

    Typora的简单实用技巧 标题 标题分为h1~h6六个等级,数字越小标题越大. 定义标题有一下几种方式. 方式一:这个标题手敲就在文本前边敲#号,#和文本中间需又空格隔开. 方式二:快捷键,Ctrl ...

  6. JAVA诞生历史【转载】

    一.计算机语言的发展史 1.第一代语言(只有机器能读懂,人根本读不懂) 纯机器语言 2.第二代语言(机器能读懂,人可以读懂,但是很难懂) 汇编语言(符号语言) 3.第三代语言(机器能读懂,也非常便于人 ...

  7. 设计模式，mvc,mvp,mvvm

    mvc model模型-视图view-控制器controller 视图可以直接访问模型,所以视图里面包括模型信息,mvc关注的是模型不变,所以在mvc中,模型不依赖视图,但是view是依赖model的 ...

  8. 错误：[ERROR] 不再支持源选项 5。请使用 6 或更高版本。 [ERROR] 不再支持目标选项 1.5。请使用 1.6 或更高版本。

    解决方案 pom.xml文件中增加maven编译的java.version jdk版本设置,以及maven.compiler.source 资源编译jdk版本设置和maven.compiler.tar ...

  9. Flink Table API & SQL 自定义Redis Sink 使用方式

    flink-connector-redis的使用方式和其他连接器几乎一样,除了一些公共的参数外(connector.type, format.type, or update-mode等),还支持以下参 ...

  10. A Novel Cross-domain Access Control Protocol in Mobile Edge Computing

    摘要 随着智能移动终端和移动通信技术的发展,移动边缘计算(MEC)已经应用到各个领域.然而,MEC也带来了新的数据安全威胁,包括数据访问威胁.针对MEC中的跨域访问控制问题,提出一种跨域访问控制协议C ...