Vue中使用 Element 组件实现分页效果

左手的ㄟ右手 2022-04-22 12:24 227阅读 0赞

[Vue官网（点击跳转）][Vue]  
[Element官网（点击跳转）][Element]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    	
        <script src="../vue-2.5.17.js"></script>
    
        
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    
    </head>
    <body>
    <div id="app">
    
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
    <script> var vm = new Vue({ el:"#app", data:{ currentPage:3,// 当前页码 pageSize:10,// 每页大小 total:1000 //总共条数 }, methods:{ //? 长度改变----改变每页显示的条数的时候 自动触发 handleSizeChange(val){ console.log("长度改变:"+val) }, // 当前改变----当前页码改变之后，触发这个函数 handleCurrentChange(val){ console.log("当前改变："+val) } } }); </script>
    
    </body>
    </html>

[Vue]: https://cn.vuejs.org/
[Element]: https://element.faas.ele.me/#/zh-CN/component/installation

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关在Vue项目中使用Element组件

0 写在前面使用组件可以快速进行开发，使用Element UI轻松制作出网页，为前端开发人员大大减轻了代码负担，即使是后端程序员也可以快速上手做出比较精美的界面。

绝地灬酷狼/ 2024年03月26日 15:47/ 0 赞/ 19 阅读

相关 VUE 在Element Table组件中实现打印

1. ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nh

灰太狼/ 2022年11月20日 10:56/ 0 赞/ 567 阅读

相关 Vue+Element+PageHelper实现分页

因为之前一直是用Layui来显示数据和对表格进行分页，最近刚学了Vue和Element组件，那就把它们结合起来实现分页以及数据的显示吧。Element和Vue可到官网详细了解。

「爱情、让人受尽委屈。」/ 2022年10月08日 05:47/ 0 赞/ 156 阅读

相关 element组件库中table自定义分页效果

1.在data中设置初始值 // 页数页码 search: { offset: 1, // 当前页

谁借莪１个温暖的怀抱￠/ 2022年09月12日 14:44/ 0 赞/ 132 阅读

相关 Vue中使用 Element 组件实现分页效果

[Vue官网（点击跳转）][Vue] [Element官网（点击跳转）][Element] <!DOCTYPE html> <html lang="en"

左手的ㄟ右手/ 2022年04月22日 12:24/ 0 赞/ 228 阅读

相关 vue+element-表格的分页实现

今天简单的介绍一下element的分页是怎么实现的，先说一下感受，之前一直是使用的jQuery的分页，其实也不全算是，使用的本质还是BootStrapUI的分页，感兴趣的可以翻

约定不等于承诺〃/ 2022年03月17日 09:20/ 0 赞/ 395 阅读

相关 vue+element-ui 实现分页（demo）

效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

川长思鸟来/ 2022年02月20日 20:45/ 0 赞/ 265 阅读

相关 Vue项目实现vue element组件走马灯效果

我的qq 2038373094 效果如下（由于不支持动态图，我就截图了） ![watermark_type_ZmFuZ3poZW5naGVpdGk_shado

男娘i/ 2022年02月03日 15:51/ 0 赞/ 539 阅读

相关 vue + element-ui 实现分页效果

我使用得是el-table+el-pagination来实现的，话不多说，直接上代码  <el-table :

浅浅的花香味﹌/ 2021年11月09日 02:52/ 0 赞/ 333 阅读

相关 vue+Element-ui实现分页效果

当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。 1.本次所使用的是vue2

叁歲伎倆/ 2021年08月14日 01:31/ 0 赞/ 397 阅读