vue中 element ui 的分页操作

<template>
<div id="app">
    <el-row>
        <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border width="100%">
            <el-table-column prop="name" fixed="left" label="姓名" width="180"></el-table-column>
            <el-table-column prop="age" label="年龄" width="180"></el-table-column>
            <el-table-column prop="sex" label="性别" width="180"></el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" size="small" icon="el-icon-delete" @click="del(scope.$index,tableData)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            align="right"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pagesize"
            layout="prev, pager, next"
            :total="tableData.length">
        </el-pagination>
    </el-row>

</div>
</template>

<script type="es6">
export default {
  data: function() {
    return {
      tableData: [
        { name: '张三', age: '18', sex: '女' },
        { name: '李四', age: '20', sex: '女' },
        { name: '王五', age: '19', sex: '男' },
        { name: '马六', age: '18', sex: '女' },
        { name: '张三', age: '18', sex: '女' },
        { name: '李四', age: '20', sex: '女' },
        { name: '王五', age: '19', sex: '男' }
      ],
      currentPage: 1, //初始页
      pagesize: 2//每页的行数
    }
  },
  methods:{
    del(index,row) {
      if(confirm("是否删除？")){
        row.splice(index,1);
      }
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    }
  }
}
</script>