elementui使用el-table与el-pagination进行数据的分页展示！

<template>

  <div>

    <div class="paging">

      <!--数据显示区域-->

      <div class="data">

        <!--表格存放数组中的数据，并对数据进行截取，以控制每一页显示的数据量-->

        <!--slice(start,end) 不包括end-->

        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe

                  style="width: 100%">

          <el-table-column prop="date" label="日期" width="220" align="center"></el-table-column>

          <el-table-column prop="name" label="姓名" width="220" align="center"></el-table-column>

          <el-table-column prop="job" label="职业" width="220" align="center"></el-table-column>

          <el-table-column prop="address" label="地址" align="center"></el-table-column>

        </el-table>

      </div>

      <!--分页按钮-->

      <el-pagination

              background

              layout="prev, pager, next,jumper, ->, total"

              :total="tableData.length"

              @current-change="handleCurrentChange"

              :current-page="currentPage"

              :page-size="pageSize"

              style="text-align: center">

      </el-pagination>

    </div>

  </div>

</template>

<script>

  export default {

    name: "fenye.vue",

    data() {

      return {

        currentPage: 1, //当前页 刷新后默认显示第一页

        pageSize: 6, //每一页显示的数据量 此处每页显示6条数据

        //假数据

        tableData: [

          {

            date: '2016-05-02',

            name: '橘右京',

            job: '刺客',

            address: '上海市普陀区金沙江路 1518'

          },

          {

            date: '2016-05-03',

            name: '娜可露露',

            job: '刺客',

            address: '上海市普陀区金沙江路 1517'

          },

          {

            date: '2016-05-04',

            name: '鲁班七号',

            job: '射手',

            address: '上海市普陀区金沙江路 1519'

          },

          {

            date: '2016-05-05',

            name: '云中君',

            job: '刺客',

            address: '上海市普陀区金沙江路 1516'

          },

          {

            date: '2016-05-06',

            name: '干将莫邪',

            job: '法师',

            address: '上海市普陀区金沙江路 1516'

          },

          {

            date: '2016-05-07',

            name: '不知火舞',

            job: '法师',

            address: '上海市普陀区金沙江路 1516'

          },

          {

            date: '2016-05-08',

            name: '沈梦溪',

            job: '法师',

            address: '上海市普陀区金沙江路 1516'

          },

          {

            date: '2016-05-09',

            name: '百里守约',

            job: '刺客',

            address: '上海市普陀区金沙江路 1516'

          },

          {

            date: '2016-05-10',

            name: '马可波罗',

            job: '射手',

            address: '上海市普陀区金沙江路 1516'

          },

          {

            date: '2016-05-11',

            name: '孙尚香',

            job: '射手',

            address: '上海市普陀区金沙江路 1516'

          },

          {

            date: '2016-05-12',

            name: '赵云',

            job: '刺客',

            address: '上海市普陀区金沙江路 1516'

          },

          {

            date: '2016-05-13',

            name: '钟无艳',

            job: '战士',

            address: '上海市普陀区金沙江路 1516'

          },

          {

            date: '2016-05-14',

            name: '杨玉环',

            job: '法师',

            address: '上海市普陀区金沙江路 1516'

          },

          {

            date: '2016-05-15',

            name: '鲁班大师',

            job: '辅助',

            address: '上海市普陀区金沙江路 1516'

          },

        ],

      }

    },

    methods: {

      //点击按钮切换页面

      handleCurrentChange(currentPage) {

        this.currentPage = currentPage; //每次点击分页按钮，当前页发生变化

        // console.log(this.currentPage);

      },

    },

    mounted() {

    }

  }

</script>

<style scoped>

  .paging {

    width: 1000px;

    height: 500px;

    margin: 100px auto;

  }

  .data {

    width: 98%;

    height: 340px;

    border: 2px solid #cccccc;

    margin: 10px auto;

    text-align: center;

  }

</style>