【vue分页功能】vue element 分页组件简简单单实现分页功能详细教学

文章目录

vue分页功能实现
- 一、直接上代码
- 二、需要注意的事项

vue分页功能实现

一、直接上代码

// 列表结构
// 重点：data="pageList"
<el-table:data="pageList":cell-style="fileNameStyle"tooltip-effect="dark"style="width: 100%"
>
</el-table>// 分页结构
// handleSizeChange: 每页的条数切换方法
// current_change: 当前是第几页方法
// *重点：currentChangePage 分页方法(js代码里)
<el-pagination@size-change="handleSizeChange"@current-change="current_change":current-page="currentPage1":page-size="pageSize"layout="prev, pager, next":total="total">
</el-pagination>

data() {return {tableListData: [], // 列表数据pageList: [], // 分页列表数据pageSize: 1, // 每页多少条currentPage1: 1, // 当前页total: 0, // 总数据条数}
},methods: {// 根据项目id查询全部列表数据async getListAll () {const { data: res } = await this.$http.post('/model/listModelFile', {id: this.parentId})if (res.code !== 0) {return this.$message.error('获取列表数据失败！')}// console.log(res)this.tableListData = res.data.listthis.currentChangePage(this.tableListData, 1)// this.pageSize = res.data.pageSizethis.currentPage = res.data.currPagethis.total = res.data.totalCount},// 每页条数切换handleSizeChange (pageSize) {this.pageSize = pageSizethis.current_change(this.currentPage1)},// 当前是第几页current_change (currentPage) {console.log('当前页改变时', currentPage)this.currentPage1 = currentPagethis.currentChangePage(this.tableListData, currentPage)},// 分页方法(重点)currentChangePage (list, currentPage) {console.log('list', list)let from = (currentPage - 1) * this.pageSizelet to = currentPage * this.pageSizethis.pageList = []for (; from < to; from++) {if (list[from]) {this.pageList.push(list[from])}}},
}

二、需要注意的事项

带分页后，列表的数据源是分页处理后的数据源，不是所有的数据；

【vue分页功能】vue element 分页组件简简单单实现分页功能详细教学相关推荐

vue多行文本框加组件_Vue的多功能文本编辑器组件
vue多行文本框加组件 Vue代码镜像 (Vue-Codemirror) codemirror component for vuejs. vuejs的codemirror组件. CodeMirror ...
计算机的内部组件功能,单片机内部各组件的名称与功能介绍
我们知道,单片机(MCU)本质上是一台非常小的计算机,完全嵌入单个集成电路(也称为芯片)中.在各种各样的电子产品中,单片机已经迅速获得了广泛的应用. 在这方面,单片机有点类似于片上系统(SoC),这通 ...
Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...
前端Vue+ElementUI的Pagination分页组件实现分页展示后端Spring Boot +Mybatis Plus实现分页接口
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了,主要原因是博主一直在补充自 ...
vue技术框架下手机端移动上拉实现分页功能
vue技术框架下手机端移动上拉实现分页功能基于手机端项目实战总结而来 1.业务场景 2.前端优化思路 3.具体实现思路 4.把返回的数据首次取N条渲染页面 5.获取滚动条的当前位置 6.获取当前可视 ...
Element 2.6.0 发布，基于 Vue 2.0 的桌面端组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? Element 2.6.0 发布了,Element 是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设 ...
Javaweb15==mysql+mybatis+servlet+axios+fasetjson+vue+elementUI前后端分离，实现列表后端分页、模糊查询后分页、新增、单一/批量删除、修改
难点:模糊查询后再次分页,并可以选择页数. 最终环境配置: maven3.8:依赖包管理 IDEA2021+JDK8+mysql connector java5+Mysql5+mybatis3.5:从 ...
vusjs 配合php_对照着jquery来学vue.js系列之配合thinkphp下拉获取分页数据
上篇文章介绍了vue.js如何ajax获取数据: 接着不可避免就遇到的是: 如何进行数据分页呢? 这里以thinkphp为示例讲解:其他场景性质一样: 示例项目:https://github.com/ ...
前后端分离 -- 深入浅出 Spring Boot + Vue + ElementUI 实现相册管理系统【文件上传分页】文件上传也不过如此～
前后端分离 – 深入浅出系列 Spring Boot + Vue + ElementUI 实现相册管理系统[文件上传分页 ] 文件上传也不过如此~ 引言 Hello,我是Bug终结者,一名热爱后端J ...

【vue分页功能】vue element 分页组件简简单单实现分页功能详细教学

文章目录

vue分页功能实现

一、直接上代码

二、需要注意的事项

【vue分页功能】vue element 分页组件简简单单实现分页功能详细教学相关推荐

最新文章

热门文章