vue+element表格实现后台分页

element ui 的分页很强，虽然我也只用过这么一个ui
最近睡眠质量真不行，行吧，进入正题
首先我后台的接口已经获取到了我所需要的列表（里面包含我需要的所有数据）

<el-table
      ref="filterTable"
      :data="detail.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      style="width: 100%"
      @filter-change="handleFilterChange">
      <el-table-column
        prop="publishDate"
        label="日期"
        sortable
        width="180">
      el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="180">
      el-table-column>
      <el-table-column
        prop="author"
        label="作者"
        width="180">
      el-table-column>
      <el-table-column
        prop="review"
        label="审核人"
        width="180">
      el-table-column>
      <el-table-column
        prop="sid"
        label="标签"
        width="100"
        :filters="[{ text: '理论学习', value: 1 }, { text: '规章制度', value: 2 },{ text: '党建工作', value: 3 }]"
        column-key="sortName"
        filter-placement="bottom-end">
        <template slot-scope="scope">

          <el-tag v-if="scope.row.sid === 1">理论学习el-tag>
          <el-tag v-if="scope.row.sid === 2">规章制度el-tag>
          <el-tag v-if="scope.row.sid === 3">党建工作el-tag>
        template>
      el-table-column>
      
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="editNews(scope.$index, scope.row)">编辑
          el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deleteNews(scope.$index, scope.row)">删除
          el-button>
        template>
      el-table-column>
    el-table>

注意这个地方 :data="detail.slice((currentPage-1)pagesize,currentPagepagesize)"这个将当前的数据片段用slice方法给锁定然后交给:data 去渲染出来
然后是分页的处理

<div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total,sizes,prev, pager, next,jumper"
        :total="detail.length">
      el-pagination>
    div>

然后js定义一些变量

data() {
      return {
        responseResult: [],
        currentPage: 1,//初始页
        pagesize: 10,//每页的数据
        detail: []
      }
    },

分页需要的方法

//分页用到的一些方法
      handleSizeChange: function (size) {
        this.pagesize = size;
        // console.log(this.pagesize)//每页下拉显示数据
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
        // console.log(this.currentPage)  //点击第几页
      }

以上，分页。
尤其需要注意的是 分页实现了动态的 如果你的筛选使用的前端实现的那么会导致筛选的是每个分页的数据，想要正常的效果得后端去实现筛选，目前还存在一些问题，有这个问题的之后可以关注我的博客。