ElementUI分页组件的基本使用

最新推荐文章于 2024-05-22 11:23:12 发布
最新推荐文章于 2024-05-22 11:23:12 发布
阅读量7.4k 收藏 5
点赞数 1
分类专栏： ElementUI 文章标签： 使用ElementUI的分页组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myloverxx/article/details/84888555
版权

使用ElementUI的分页组件

1 官网：http://element-cn.eleme.io/#/zh-CN

2 使用步骤：

第一步：创建vue的基本页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-2.5.17.js"></script>

</head>
<body>
<div id="app">

</div>
<script>

var vm = new Vue({
   el:"#app"

});


</script>

</body>
</html>

第二步：引入elementUI的组件

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

</div>
<script>

var vm = new Vue({
   el:"#app"

});
</script>
</body>
</html>

第三步：搜索分页组件栏

1541213289361

1541213317400

复制代码：

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

第五步：添加事件

<!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>
じ小奋斗_
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elmentui分页组件的理解
weixin_45770504的博客
04-29 1396
Element ui 实现分页 //先在表单上面绑定数据 <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%" > //然后实现对分页信息的控制 <!-- 分页 --> <div class="fenye"> <!-- @size-chan
VUE UI 组件 Element 中分页的使用
qq_44698161的博客
11-08 245
从17:00到20:30 与分页战斗 正在清算战利品 >>>>> 分页属性 <div class="block newsPage"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page...
elementui分页组件的使用
11-19 3489
<!--分页 start--> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.currentPage" :page-sizes="[5, ...
ElementUI Pagination 分页组件
weixin_74285634的博客
07-12 371
【代码】2-1、分页静态搭建及渲染数据。2-1、首先获取到服务器数据。
Element-UI详解
最新发布
科技追踪者的专栏
05-22 2856
Element-UI 是一个功能强大、使用便捷的 Vue.js UI 组件库，它为开发者提供了一整套解决方案，大大提高了前端开发的效率和质量。通过本文的介绍，相信你已经对 Element-UI 有了深入的了解。无论是企业后台、内容管理系统还是在线教育平台，Element-UI 都能帮助你快速构建出高质量的应用。希望你在实际项目中能充分利用 Element-UI 的强大功能，开发出更多优秀的应用。
element分页组件的使用
greed
08-18 4400
分页组件 <el-pagination layout="total, sizes,prev,pager,next,jumper" :page-size="pageParams.pagesize" :page-sizes="[3,5,7,10]" :total="total" :current-page.sync="curPage"
Vue 3和Element组件库的分页功能实现
chen520的博客
07-02 5275
Vue 3是一个灵活的JavaScript框架，采用虚拟DOM和响应式数据的概念，使开发者能够高效地构建用户界面。Element作为一套基于Vue.js的UI组件库，提供了丰富的UI组件和美观的样式，无论是数据展示还是用户交互都能发挥巨大作用。为了使用Vue 3和Element，需要正确安装和配置它们。Vue 3是一个用于构建用户界面的JavaScript框架，它具有更高的运行时性能和更好的开发体验。
Element UI的分页组件知识点整理
World_Mei的博客
05-05 879
el-pagination 组件的属性： 1、total：设置分页数据的总个数。 2、page-size：设置每页的数据个数。（默认值：10） 3、page-count：设置分页的页数。 设置分页可以有两种方案： （1）设置total和page-size。 （2）设置page-size和page-count。 4、pager-count：设置可显示的最大页码个数（7）。 5、prev-text：...
vue+elementUI组件table实现前端分页功能
10-15
本文将深入探讨如何使用Vue和Element UI组件`el-table`和`el-pagination`来创建一个高效的前端分页系统。 首先，前端分页与后端分页的主要区别在于数据处理的位置。后端分页是在服务器端完成的，每次用户翻页都会向...
【Vue2 + ElementUI】分页el-pagination 封装成公用组件
01-25
封装分页组件的第一步是创建一个新的Vue组件，例如名为`CustomPagination.vue`。在该组件中，我们将引入el-pagination，并定义需要传递的props，如上述的`page-size`、`total`和`current-page`。同时，我们还可以...
详解vue修改elementUI的分页组件视图没更新问题
01-22
今天遇到一个小问题平时没留意，el-pagination这个分页组件有一个属性是current-page当前页。 今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果，结果发现分页组件视图并没有渲染，还是停留在原本的...
springboot使用elementUI分页对数据进行crud.zip
01-11
总结来说，"springboot使用elementUI分页对数据进行crud.zip"项目展示了如何利用Spring Boot的强大力量结合Element UI的易用性，实现数据的分页CRUD操作。通过这样的方式，我们可以构建出一个高效、美观的后台管理...
Axure 使用ElementUI组件的 web后台管理
07-06
你可以为ElementUI组件设置点击、 hover等交互事件，使用动态面板实现页面切换，通过条件逻辑控制组件的显示和隐藏，模拟数据加载、分页等后台功能。 5. 生成原型和规范文档：完成设计后，可以导出原型链接，分享给...
封装一个简单的分页组件（ElementUI）
weixin_45369499的博客
05-20 886
1.在项目的component文件夹下创建名为TablePage的vue文件： 2.使用ElementUI的分页组件： 3.在目标页面引入TablePage组件并使用 <TablePageVue /> import TablePageVue from '../components/TablePage.vue' export default { components: { TablePageVue }, ... } 4.props 父组件传值： <TablePa
elementUI 分页组件
kurcp的博客
11-01 222
elementUI 分页
Vue3 element-ui实现Pagination分页组件--封装分页
热门推荐
coinisi_li的博客
02-09 1万+
而且它自己里面已经封装的很好了，只需要简单的调用作用在标签上的函数就能够实现平滑的滚动，用起来非常的简便。假分页:一开始从后端发送请求获取所有的数据，前端通过在组件的方式对数据进行分页，再点击分页的按钮的时候，数据其实已经在浏览器缓存的缓存中了，不需要再请求后端接口。3、注册本地组件，并且因为在添加标签的时候，绑定的有属性和方法，所以要对属性进行声明，以及方法的实现。真分页：当你目前在首页的时候，点击“第二页”或“下一页”的时候，会重新向后端发送请求，请求第二页的数据。
Vue组件库Element-常见组件-分页
weixin_64939936的博客
07-07 379
常见组件-Pagination 分页。具体关键代码如下：（重视注释）
element组件中分页的使用
qq_21861771的博客
05-27 171
这是一种写法，可以让大家进行一个参考和使用，如果有更简便的方法可以进行更改。废话不多说 直接上代码实践。
element分页如何使用
qq_19820589的博客
06-02 583
Element UI 的分页组件非常方便实用，只需要在页面中引入组件并传入相应的分页参数即可。首先需要在页面中引入分页组件。
elementui分页
06-01
ElementUI 是一个基于 Vue.js 的组件库，其中包含了很多常用的组件，包括分页组件。使用 ElementUI 的分页组件可以非常方便地实现分页功能。 首先在你的 Vue.js 项目中安装 ElementUI： ``` npm install element-ui --save ``` 然后在你的代码中引入分页组件： ```html <template> <div> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </template> <script> export default { data() { return { currentPage: 1, pageSize: 10, total: 100 }; }, methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); } } }; </script> ``` 在上面的代码中，我们使用了 ElementUI 的 `el-pagination` 组件，并且设置了一些属性来配置分页功能。其中，`currentPage` 表示当前页码，`pageSize` 表示每页显示的数据条数，`total` 表示总数据条数。 在 `methods` 中，我们定义了两个函数，分别处理分页大小和当前页码的变化。这些函数可以根据实际需求来定制。 最后，我们在模板中使用 `el-pagination` 组件来实现分页功能，同时根据需要设置 `layout` 属性来控制分页组件的显示方式。 这就是使用 ElementUI 实现分页功能的基本步骤。根据实际需求，你可以根据 ElementUI 的文档来进一步定制分页组件的样式和功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值