vue elementUI 分页 - Pagination - 前端分页

版本

vue 2.9.6
element-ui: 2.15.6

目标效果

Car.vue

点击查看代码

<template>
  <div class="app">
    <el-table size="small" :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column prop="brand" label="品牌" width="180"></el-table-column>
      <el-table-column prop="model" label="车型" width="180"></el-table-column>
      <el-table-column prop="price" label="指导价"></el-table-column>
    </el-table>
    <div class="tabListPage">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="100"
        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() {
      this.tableData = [{
        brand: '一汽-大众奥迪',
        model: '奥迪A4L',
        price: '30.58-39.68万',
      },{
        brand: '阿尔法·罗密欧',
        model: 'Giulia',
        price: '37.98-158.00万',
      },{
        brand: '北京奔驰',
        model: '奔驰C级',
        price: '32.52-37.22万',
      },{
        brand: '华晨宝马',
        model: '宝马3',
        price: '29.39-40.99万',
      },{
        brand: '比亚迪',
        model: '海豹',
        price: '20万',
      },{
        brand: '东风本田',
        model: '英仕派',
        price: '17.99-25.59万',
      },{
        brand: '广汽本田',
        model: '雅阁',
        price: '16.98-25.98万',
      },{
        brand: '上汽通用别克',
        model: '君威',
        price: '19.68-24.98万',
      },{
        brand: '上汽通用别克',
        model: '君越',
        price: '21.98-28.98万',
      },{
        brand: '东风标致',
        model: '标致508',
        price: '15.97-22.47万',
      },{
        brand: '上汽通用五菱',
        model: '宝骏RC-6',
        price: '8.48-12.38万',
      },{
        brand: '一汽奔腾',
        model: '奔腾B70',
        price: '9.99-14.59万',
      }]
      this.totalCount = 12
    },
    handleSizeChange(val) {
      this.pageSize = val
      // this.currentPage = 1
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页： ${val} `)
    }
  },
  created: function() {
    this.getData()
  }
}
</script>
<style>
.page-box {
  margin: 10px auto;
}
</style>