vue 逻辑分页

<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"
        :total="tableData.length"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize">
      </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>