vue表格前端分页

<el-table
  :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
  style="width: 100%;margin-bottom: 20px;"
  row-key="id"
  border
  :tree-props="{children: 'refuelingBagCatalog', hasChildren: 'hasChildren'}"
>
  <el-table-column
    prop="createdAt"
    label="创建日期"
    sortable
    width="190"
  />
  <el-table-column
    prop="name"
    label="名称"
    width="180"
  />
  <el-table-column
    prop="bannerUrl"
    label="活动封面"
  >
    <template slot-scope="scope">
      <img :src="scope.row.bannerUrl" min-width="70" height="70">
    </template>
  </el-table-column>
  <el-table-column
    label="操作"
  >
    <template slot-scope="scope">
      <el-button v-if="scope.row.bannerUrl" size="mini" plain @click="addcatalog(scope.row.id)">添加目录
      </el-button>
      <el-button
        v-if="scope.row.bannerUrl"
        type="primary"
        size="mini"
        plain
        @click="Editinformation(scope.row)"
      >编辑
      </el-button>
      <el-button v-if="scope.row.bannerUrl" type="danger" size="mini" plain @click="displayQRCode(scope.row.codeUrl)">二维码
      </el-button>
      <el-button
        v-if="!scope.row.bannerUrl"
        type="primary"
        size="mini"
        plain
        @click="Editincatalog(scope.row)"
      >编辑
      </el-button>
      <el-button
        v-if="!scope.row.bannerUrl"
        type="danger"
        size="mini"
        plain
        @click="deletecatalog(scope.row.id)"
      >删除
      </el-button>
    </template>
  </el-table-column>
</el-table>
<el-pagination
  :current-page.sync="currentPage"
  :page-size="pageSize"
  layout="total, prev, pager, next"
  :total="totals"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>

export default {
  data() {
    return {
      loading: true,
      tableData: [], // 表格列表
      currentPage: 1,
      pageSize: 10,
      totals: 0,
    }
  },
  created() {
    this.gettableList()
  },
  methods: {
   // 获取表格列表
    gettableList() {
      this.request.getMan(this.api.tableList, { type: this.selectvalue }).then(res => {
        if (res.code == 1) {
          this.tableData = res.data
          this.totals = res.data.length
          this.loading = false
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
  }
}