vue+elementUI写一个前端分页简单方法的小例子

<template>
  <div>
    <el-table
      :data="list.slice((this.query.pageNum - 1) * this.query.pageSize, this.query.pageNum * this.query.pageSize)">
      <el-table-column label="服务名" width="200px" prop="serviceName" show-overflow-tooltip></el-table-column>
      <el-table-column label="告警对象" prop="instanceName">
        <template slot-scope="scope">{{ scope.row.instanceName.replace(',',' , ') }}</template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page.sync="query.pageNum" :page-size="query.pageSize"
                   layout="total,prev, pager, next,sizes,jumper" :total="list.length" @current-change="handleCurrentChange"
                   @size-change="changeSizeHandler" size="small"></el-pagination>
  </div>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    data() {
      return {
        query: {
          pageNum: 1,
          pageSize: 10
        }
      }
    },
    methods: {
      changeSizeHandler(size) {
        this.query.pageSize = size
      },
      handleCurrentChange(currentPage) {
        this.query.pageNum = currentPage
      }
    }
  }
</script>

此处的表格数据是从父页面传过来的数据，数组。

 

另如果表格要用多选，这个

<el-table
  :data="list.slice((this.query.pageNum - 1) * this.query.pageSize, this.query.pageNum * this.query.pageSize)">直接在页面里面写silce计算方法很可能会有一个bug出现，就是多选选不动

解决办法：

写一个中间变量listShow，list在script中进行分页数据计算，赋值给listShow，表格页面里写listShow，如下示例：

 changeSizeHandler(size) {
        this.query.pageSize = size
        this.listShow = this.list.slice((this.query.pageNum - 1) * this.query.pageSize, 
        this.query.pageNum * this.query.pageSize)
      },
      handleCurrentChange(currentPage) {
        this.query.pageNum = currentPage
        this.listShow = this.list.slice((this.query.pageNum - 1) * this.query.pageSize, 
        this.query.pageNum * this.query.pageSize)
      },