element-ui的分页el-pagination的坑,
2017-10-10 16:21
453 查看
1.所有的信息都必须的动态的
<el-pagination
class="pull-right clearfix"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pageNo"
:page-sizes="pageSizesList"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalDataNumber">
</el-pagination>2.数据在data里面
pageNo: 1,
pageSize: 10,
pageSizesList: [10, 15, 20, 30, 50],
tableData: [],//返回的结果集合
totalDataNumber: 0,//数据的总数,
3.这是重中之重,认真我的认证
this.$http({
method: 'POST',
url: '/api/Acs/QueryAccessLog',
data: requestData
}).then(function (resp) {
console.log(resp);
if (resp.data.Data.Result.length > 0) {
likeThis.tableData = resp.data.Data.Result;
likeThis.totalDataNumber = resp.data.Data.Total<
aeb3
span style="color:#cc7832;">;
likeThis.listLoading=false;
} else {
likeThis.tableData = [];
likeThis.totalDataNumber = 0;
}
})
//改变每页显示数量
handleSizeChange(val){
var likeThis=this;
var pageSize = `${val}`;
this.pageNo=1
this.pageSize= parseInt(pageSize);
console.log('pageSize: '+pageSize);
this.$nextTick(() =>
this.getAndDraw(1,pageSize,function (resp) {
likeThis.totalDataNumber = resp.data.Data.Total;
})
)
},
//改变页码
handleCurrentChange(val){
var pageSize=this.pageSize;
// this.pageNo=pageNo;
console.log('pageSize:'+this.pageSize)
this.getAndDraw(parseInt(pageNo),parseInt(pageSize));
},
<el-pagination
class="pull-right clearfix"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pageNo"
:page-sizes="pageSizesList"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalDataNumber">
</el-pagination>2.数据在data里面
pageNo: 1,
pageSize: 10,
pageSizesList: [10, 15, 20, 30, 50],
tableData: [],//返回的结果集合
totalDataNumber: 0,//数据的总数,
3.这是重中之重,认真我的认证
this.$http({
method: 'POST',
url: '/api/Acs/QueryAccessLog',
data: requestData
}).then(function (resp) {
console.log(resp);
if (resp.data.Data.Result.length > 0) {
likeThis.tableData = resp.data.Data.Result;
likeThis.totalDataNumber = resp.data.Data.Total<
aeb3
span style="color:#cc7832;">;
likeThis.listLoading=false;
} else {
likeThis.tableData = [];
likeThis.totalDataNumber = 0;
}
})
//改变每页显示数量
handleSizeChange(val){
var likeThis=this;
var pageSize = `${val}`;
this.pageNo=1
this.pageSize= parseInt(pageSize);
console.log('pageSize: '+pageSize);
this.$nextTick(() =>
this.getAndDraw(1,pageSize,function (resp) {
likeThis.totalDataNumber = resp.data.Data.Total;
})
)
},
//改变页码
handleCurrentChange(val){
var pageSize=this.pageSize;
// this.pageNo=pageNo;
console.log('pageSize:'+this.pageSize)
this.getAndDraw(parseInt(pageNo),parseInt(pageSize));
},
相关文章推荐
- angularjs ui.bootstrap.pagination分页简单使用
- VueJS ElementUI el-table 的 formatter 和 scope template 不能同时存在
- element-ui的el-date-picker组件设置提交时的日期值格式
- vue+element ui 使用$refs获取el-dialog 下的 el-table 组件 ,以及使用table多选,默认选中
- vue使用element-ui的el-input监听不了回车事件的解决方法
- Vue2.0 UI框架Element运用之DateTimePicker(el-date-picker)初始值及时间格式转化等细节问题
- vue+elementui 之 table+pagination
- 解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
- 关于使用element-ui的el-input监听不了回车事件
- Vue+ElementUI+SpringMVC实现分页
- 15.vue使用element-ui的el-input监听不了回车事件
- 利用vue和element-ui设置表格内容分页的实例
- vue+Element-ui实现分页效果
- vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
- AngularJS ui.bootstrap.pagination 分页
- 当你用element-ui遇到需要在el-table-column上v-for时,这篇文章你能用的上,也就是你需要二级循环
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- Vue2.0+ElementUI+PageHelper实现的表格分页
- elementUI 在el-row 或者 el-col 上使用@click失效
- element ui 对话框el-dialog关闭事件