vue分页之el-pagination 用法

标签属性

<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background layout="total, sizes, prev, pager, next, jumper"
:total="total"
:page-size="10"
:page-sizes="[10, 20, 30, 40, 50, 100]">
</el-pagination>


<script>
export default {data(){return{dialogFormVisible:false,tableData:[],total:0,  //总条数pSize:10  //默认10条}},methods:{getDataList(index,pageSize){  //获取数据列表this.$axios.get('接口地址',{params: {pageSize:pageSize,currentPage:index},headers:{accessToken:''}}).then(response=>{this.total=response.data.data.rowCount;if(response.data){this.tableData=response.data.data.data;}}).catch(err=>{alert(err);}) },   handleSizeChange(val) {console.log('每页'+ val+' 条');this.pSize=val;this.getDataList(1,val);},handleCurrentChange(val) {console.log('当前页: '+val);this.getDataList(val,this.pSize);}},mounted(){this.getDataList(1,this.pSize);}
}
</script>

vue分页之el-pagination 用法相关推荐

关于Vue admin 框架中 Pagination 分页异步加载的问题
关于Vue admin 框架中 Pagination 分页异步加载的问题贴代码核心代码: this.$emit('update:page', this.currentPage) this.$em ...
详解Vue中watch的高级用法
转载自详解Vue中watch的高级用法我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 1 2 3 4 5 6 7 8 9 10 ...
slot多作用域 vue_详解Vue.js 作用域、slot用法（单个slot、具名slot）
作用域HEi免费资源网在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板:HEi免费资源网 {{message}} 这里的message就是一个slot,但是它绑定的是父组件 ...
项目总结-vue分页组件集成
项目总结-vue分页组件集成后台管理的大部分页面都需要对数据进行分页显示,但是在每个页面都写分页代码太过冗余,而且当分页出现问题时,需要修改每个页面,所以我集成了一个分页组件,在每个页面直接引用这个 ...
javaFx学习之分页控件Pagination
原文链接:DOC-03-27 分页控件(Pagination Control) | JavaFX中文资料 JavaFX程序中添加分页(Pagination)控件.它会告诉你如何向程序中添加Pagina ...
angular分页插件tm.pagination
源码在线查看 angular分页插件tm.pagination(解决触发二次请求的问题) 根据条件查询需要重新定义一个方法 $scope.paginationConf = {currentPag ...
vue分页+spring boot +分页插件pagehelper
vue分页+spring boot +分页插件pagehelper https://blog.csdn.net/baidu_38603246/article/details/98854013
「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、可用于更新数据到视图
夜晚有明月,梦里有佳人前言最近在写老师布置的vue项目,真的说实话,每天真就是在百度.google.bing等各个搜索引擎之间反复横跳,不然就是掘金搜一搜.思否搜一搜,还有CSDN看一看.我的前端 ...
JSP 中EL表达式用法详解
EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...
ElementUI+VUE 日期控件禁用用法
今天给大家整理一下ElementUI+VUE 日期控件禁用用法,希望对大家有所帮助! HTML文件 <el-date-pickerv-model="value"type=&q ...

vue分页之el-pagination 用法

vue分页之el-pagination 用法相关推荐

最新文章

热门文章