WEB端分页显示实例

1、页面html文件
<div>
  <el-table :data="tableData" style="width:100%" border>
    <el-table-column type="index" width="50"></el-table-column>
    <el-table-column prop="name" width="180" label="sid"></el-table-column>
    <el-table-column prop="encode" width="180" label="catalogName"></el-table-column>
    <el-table-column prop="address" width="180" label="catalogCode"></el-table-column>
    <el-table-column>
      <el-button type="primary" round>查看</el-button>
      <el-button type="danger" round>删除</el-button>
    </el-table-column>
  </el-table>
</div>
<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="tableData.length">
  </el-pagination>
</div>

2、Javascript

<script>
export default {
  data () {
    return {
      currentPage: 1,
      pageSize: 4,
      pageCount: 0,
      tableData: [],
      list: [{
        index: 1,
        name: '张三',
        encode: '80000001',
        address: '新疆乌鲁木齐'
      }, {
        index: 1,
        name: '李四',
        encode: '80000002',
        address: '西藏拉霎'
      }, {
        index: 1,
        name: '王麻子',
        encode: '80000003',
        address: '甘肃天水'
      }, {
        index: 1,
        name: '赵六',
        encode: '80000004',
        address: '宁夏银川'
      }, {
        index: 1,
        name: '钱七',
        encode: '80000005',
        address: '内蒙呼和浩特'
      }, {
        index: 1,
        name: '孙八',
        encode: '80000006',
        address: '青海西宁'
      }]
    }
  },
  created: function () {
    this.handleCurrentChange(this.currentPage)
  },
  methods: {
    handleSizeChange: function (size) {
      this.pageSize = size
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      this.currentChangePage(this.list, currentPage)
    },
    handlePrevClick: function () {
      if (this.currentPage !== 1) {
        this.currentPage++
      }
    },
    handleNextClick: function () {
      if (this.currentPage <= this.pageCount) {
        this.currentPage--
      }
    },
    currentChangePage (list, currentPage) {
      console.log(list.length)
      console.log(currentPage)
      this.pageCount = (list.length + this.pageSize - 1) / this.pageSize
      console.log(this.pageCount)
      let from = (currentPage - 1) * this.pageSize
      let to = currentPage * this.pageSize
      this.tabledata = []
      for (;from < to; from++) {
        console.log(from)
        console.log(list[from])
        if (list[from]) {
          this.tableData.push(list[from])
        }
      }
    }
  }
}
</script>