添加分页el-pagination

编辑FundList.vue，给表格添加分页：

 <template><div class="fillContainer"><div><el-form :inline="true" ref="add_data"><el-form-item class="btnRight"><el-button type="primary"size="small"icon="view"@click="handleAdd()">添加</el-button></el-form-item></el-form></div><div class="table_container"><el-table v-if="tableData.length > 0":data="tableData"max-height="450"borderstyle="width: 100%"><!--此处省略--></el-table><!--分页--><el-row><el-col :span="24"><div class="pagination"><el-pagination @size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="paginations.page_index":page-sizes="paginations.page_sizes":page-size="paginations.page_size":layout="paginations.layout":total="paginations.total"></el-pagination></div></el-col></el-row></div><Dialog :dialogue="dialogue" :formData="formData" @update="getProfile"></Dialog></div>
</template><script>import Dialog from '../components/Dialog';export default {name: "fundList",components: {Dialog},data() {return {paginations: {page_index: 1, //当前页面total: 0,      //总页数page_size: 5,  //每页显示的记录条数page_sizes: [5, 10, 15, 20],  //可选择的page_size范围layout: "total, sizes, prev, pager, next, jumper"  //翻页属性},tableData: [],formData: {type: "",description: "",income: "",expense: "",cash: "",remark: "",id: ""},dialogue: {show: false,title: '',option: 'edit'}};},created() {this.getProfile();},methods: {getProfile() {this.$axios.get('/api/profiles').then(res => {this.tableData = res.data;}).catch(err => console.log(err));},handleEdit(index, row) {//console.log("HANDLE EDIT");this.dialogue = {show: true,title: "修改资金信息",option: "edit"};this.formData = {type: row.type,description: row.description,income: row.income,expense: row.expense,cash: row.cash,remark: row.remark,id: row._id};},handleDelete(index, row) {//console.log("HANDLE DELETE");this.$axios.delete(`/api/profiles/delete/${row._id}`).then(res => {this.$message("删除成功");this.getProfile();})},handleAdd() {//console.log("HANDLE ADD");this.dialogue = {show: true,title: "添加资金信息",option: "add"};this.formData = {type: '',description: '',income: '',expense: '',cash: '',remark: '',id: ''};},handleSizeChange(page_size) {//},handleCurrentChange(page) {//}}}</script><style scoped>.fillContainer {width: 100%;height: 100%;padding: 16px;box-sizing: border-box;}.btnRight {float: right;}.pagination {text-align: right;margin-top: 10px;}
</style>

实现分页相关方法

引入allTableData，并完善handleSizeChange、handleCurrentChange、setPaginations方法。

<script>import Dialog from '../components/Dialog';export default {name: "fundList",components: {Dialog},data() {return {paginations: {page_index: 1, //当前页面total: 0,      //总页数page_size: 5,  //每页显示的记录条数page_sizes: [5, 10, 15, 20],  //可选择的page_size范围layout: "total, sizes, prev, pager, next, jumper"  //翻页属性},tableData: [],allTableData: [],formData: {type: "",description: "",income: "",expense: "",cash: "",remark: "",id: ""},dialogue: {show: false,title: '',option: 'edit'}};},created() {this.getProfile();},methods: {getProfile() {this.$axios.get('/api/profiles').then(res => {this.allTableData = res.data;//设置分页数据this.setPaginations();}).catch(err => console.log(err));},handleEdit(index, row) {//console.log("HANDLE EDIT");this.dialogue = {show: true,title: "修改资金信息",option: "edit"};this.formData = {type: row.type,description: row.description,income: row.income,expense: row.expense,cash: row.cash,remark: row.remark,id: row._id};},handleDelete(index, row) {//console.log("HANDLE DELETE");this.$axios.delete(`/api/profiles/delete/${row._id}`).then(res => {this.$message("删除成功");this.getProfile();})},handleAdd() {//console.log("HANDLE ADD");this.dialogue = {show: true,title: "添加资金信息",option: "add"};this.formData = {type: '',description: '',income: '',expense: '',cash: '',remark: '',id: ''};},handleSizeChange(page_size) {this.paginations.page_index = 1;this.paginations.page_size = page_size;this.tableData = this.allTableData.filter((item, index) => {return index < page_size;});},handleCurrentChange(page) {let index = this.paginations.page_size * (page - 1);let nums = this.paginations.page_size * page;let tables = [];   // 存储跳转页面要显示的记录for (let i = index; i < nums; i++) {if (this.allTableData[i]) {tables.push(this.allTableData[i]);}this.tableData = tables;}},setPaginations() {this.paginations.total = this.allTableData.length;this.paginations.page_index = 1;this.paginations.page_size = 5;//设置默认的分页数据this.tableData = this.allTableData.filter((item, index) => {return index < this.paginations.page_size;});}}}</script>

vue2+element-ui实现表格分页显示相关推荐

element ui 实现表格分页
1. 创建表格 <template><el-table:data="tableData"style="width: 100%">< ...
【vue】Element UI实现表格表头纵向显示
element实现表格表头纵向显示我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的.那么我们的需求有时候会要求行列转换,那么来看看咋 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
element UI 修改表格边框颜色
element UI 修改表格边框颜色由于我只想要改变该页面的表格边框颜色,加上表格类名 /** 改变边框颜色*/.right-content .el-table--border, .el-tabl ...
帆软如何把两个表格分页显示
项目经理安排一个任务,两个表格要求用帆软导出,且两个表格分页显示. 后面研究发现可以这样弄,利用帆软新增两个sheet然后在导出word时是一个word分页显示的两个表格:导出Excel时是两个she ...
【Axure视频教程】中继器表格——分页显示
Hello,今天教大家在axure用中继器制作分页显示的高保真原型模板,主要包括3部分内容:一个是用中继器制作内容表格:第二个是用中继器制作上拉列表:第三个是两个中继器之间的联动交互.制作完成之后复用 ...
element ui实现前端分页
element ui里的分页组件: <el-pagination@size-change="handleSizeChange"@current-change="ha ...

vue2+element-ui实现表格分页显示

vue2+element-ui实现表格分页显示

添加分页el-pagination

实现分页相关方法

vue2+element-ui实现表格分页显示相关推荐

最新文章

热门文章