Vue+ElementUI table实现表格分页

本篇文章为大家展示了Vue+ElementUI table实现表格分页，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

一、在elementUI中将表格、分页引入自己的页面中

<template>  <div class="app">    <el-table :data="tableData" >      <el-table-column prop="date" label="日期" width="180"></el-table-column>      <el-table-column prop="name" label="姓名" width="180"></el-table-column>      <el-table-column prop="address" label="地址"></el-table-column>    </el-table>    <el-pagination     @size-change="handleSizeChange"     @current-change="handleCurrentChange"     :current-page="currentPage"     :page-sizes="[100, 200, 300, 400]"     :page-size="100"     layout="total, sizes, prev, pager, next, jumper"     :total="400">    </el-pagination>  </div>  </template>  <script>   export default {    data() {     return {      tableData: [{       date: '2016-05-02',       name: '王小虎',       address: '上海市普陀区金沙江路 1518 弄'      }, {       date: '2016-05-04',       name: '王小虎',       address: '上海市普陀区金沙江路 1517 弄'      }, {       date: '2016-05-01',       name: '王小虎',       address: '上海市普陀区金沙江路 1519 弄'      }, {       date: '2016-05-03',       name: '王小虎',       address: '上海市普陀区金沙江路 1516 弄'      }],      // 默认显示第一条      currentPage:1     }    },    methods: {      handleSizeChange(val) {       console.log(`每页 ${val} 条`);      },      handleCurrentChange(val) {       console.log(`当前页: ${val}`);      }     },   } </script>

二、前端分页（在一的基础上添加分页功能）

<template>  <div class="app">      <!-- 将获取到的数据进行计算 -->      <el-table :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" >      <el-table-column prop="date" label="日期" width="180"></el-table-column>      <el-table-column prop="name" label="姓名" width="180"></el-table-column>      <el-table-column prop="address" label="地址"></el-table-column>    </el-table>    <div class="tabListPage">       <el-pagination @size-change="handleSizeChange"               @current-change="handleCurrentChange"               :current-page="currentPage"               :page-sizes="pageSizes"               :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"               :total="totalCount">        </el-pagination>     </div> </div> </template> <script> export default {   data(){     return {       // 总数据       tableData:[],       // 默认显示第几页       currentPage:1,       // 总条数，根据接口获取数据长度(注意：这里不能为空)       totalCount:1,       // 个数选择器（可修改）       pageSizes:[1,2,3,4],       // 默认每页显示的条数（可修改）       PageSize:1,     }   },  methods:{     getData(){        // 这里使用axios，使用时请提前引入        axios.post(url,{          orgCode:1        },{emulateJSON: true},        {         headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}         }        ).then(reponse=>{           console.log(reponse)           // 将数据赋值给tableData           this.tableData=data.data.body           // 将数据的长度赋值给totalCount           this.totalCount=data.data.body.length        })       },     // 分页     // 每页显示的条数     handleSizeChange(val) {       // 改变每页显示的条数        this.PageSize=val       // 注意：在改变每页显示的条数时，要将页码显示到第一页       this.currentPage=1     },      // 显示第几页     handleCurrentChange(val) {       // 改变默认的页数       this.currentPage=val     },   },   created:function(){      this.getData()    } } </script>

三、后端分页（在一的基础上添加分页功能）

<template>  <div class="app">     <el-table :data="tableData" >      <el-table-column prop="date" label="日期" width="180"></el-table-column>      <el-table-column prop="name" label="姓名" width="180"></el-table-column>      <el-table-column prop="address" label="地址"></el-table-column>    </el-table>     <div class="tabListPage">       <el-pagination @size-change="handleSizeChange"                @current-change="handleCurrentChange"                :current-page="currentPage"                :page-sizes="pageSizes"                :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"                :total="totalCount">        </el-pagination>     </div>  </div> </template> <script> export default {   data(){     return {        // 总数据       tableData:[],       // 默认显示第几页       currentPage:1,       // 总条数，根据接口获取数据长度(注意：这里不能为空)       totalCount:1,       // 个数选择器（可修改）       pageSizes:[1,2,3,4],       // 默认每页显示的条数（可修改）       PageSize:1,     }   },  methods:{      // 将页码，及每页显示的条数以参数传递提交给后台     getData(n1,n2){        // 这里使用axios，使用时请提前引入        axios.post(url,{           orgCode:1,           // 每页显示的条数           PageSize:n1,           // 显示第几页           currentPage:n2,        },{emulateJSON: true},        {         headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}          }         ).then(reponse=>{           console.log(reponse)           // 将数据赋值给tableData           this.tableData=data.data.body           // 将数据的长度赋值给totalCount           this.totalCount=data.data.body.length         })       },     // 分页      // 每页显示的条数     handleSizeChange(val) {       // 改变每页显示的条数        this.PageSize=val       // 点击每页显示的条数时，显示第一页       this.getData(val,1)       // 注意：在改变每页显示的条数时，要将页码显示到第一页       this.currentPage=1      },      // 显示第几页     handleCurrentChange(val) {       // 改变默认的页数       this.currentPage=val       // 切换页码时，要获取每页显示的条数       this.getData(this.PageSize,(val)*(this.pageSize))     },   },   created:function(){      this.getData(this.PageSize,this.currentPage)    }  } </script>

上述内容就是Vue+ElementUI table实现表格分页，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。