elementui el-table 后端分页
2019-05-05 10:34
387 查看
[code]<el-table size='medium' :data="tableData" border style="width:100%"></el-table> <el-pagination v-show="isPage" @current-change="handleCurrentChange" :current-page="page.currentPage" :page-size="page.pageSize" layout="total, prev, pager, next, jumper" :total="page.totalCount" background style="float:right;margin:10px 20px 0 0;"> </el-pagination> data() { return { tableData: [], page: { currentPage: 1, // 当前页 pageSize: 10, // 每页显示条目个数 totalCount: 0 // 总条目数 }, isPage: false } }, methods:{ getTableData(pageNo) { var self = this self.$http.post().then(res => { if (res.data.success) { if (res.data.data.result.length>0) { self.isPage = true } self.tableData = res.data.data.result self.$set(self.page, 'totalCount', res.data.data.total) self.$set(self.page, 'pageSize', res.data.data.pageSize) self.$set(self.page, 'currentPage', res.data.data.currentPage) } }) .catch(function(error) { console.log(error) }) }, handleCurrentChange(val) { this.getTableData(val) } }
相关文章推荐
- vue将指定区域的表格数据或element-ui中el-table的数据单笔或多笔批量导出excel
- ElementUI el-table 在flex下的宽度自适应问题
- vue+elementui的table行内实现el-upload文件添加/多文件上传
- elementui el-table 表格列做了处理,导出表格功能
- element-ui的分页el-pagination的坑,
- elementUI el-table-column 省略号不生效
- vue+elementui中的el-table中拼接接口返回的两个字段的数据并展示
- elementUI el-table表格列排序的两种方法
- 详解VUE 对element-ui中的ElTableColumn扩展
- elementui el-table 单元格是图标,鼠标划入显示文字
- VueJS ElementUI el-table 的 formatter 和 scope template 不能同时存在
- VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
- 用element-ui之el-form、el-table、el-pagination组件实现列表展示和查询条件的渲染
- 当你用element-ui遇到需要在el-table-column上v-for时,这篇文章你能用的上,也就是你需要二级循环
- Mybatis:pageHelper+elementUI-el-pagination实现分页
- elementui el-table 列循环
- vue+element ui 使用$refs获取el-dialog 下的 el-table 组件 ,以及使用table多选,默认选中
- vue2.0 + element UI 中 el-table 数据导出Excel的方法
- VueJS ElementUI el-table 的 formatter 和 scope template 不能同时存在
- Vue2.0 + ElementUI的+ PageHelper实现的表格分页