Element-UI 分页器的使用

<el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="currentPage1"
               :page-sizes="[10, 20, 30, 40]"
               :page-size="PageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="pages"
               >
</el-pagination>
<script>
export default {
data(){
return{

//  默认显示第几页
 currentPage1: 1,

//  每页显示多少条
 PageSize: 10,

//共多少条
   pages: 0,
};
},
  methods:{
   //每页几条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.$apiGet("http://47.94.4.201/index.php/index/role/getroleslist", {
        page: val,
      }).then((res) => {
        // console.log(res.data.data);
        this.PageSize = val;
        this.tableData = [...res.data.data];
      });
    },
    // 第几页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$apiGet("http://47.94.4.201/index.php/index/role/getroleslist", {
        page: val,
      }).then((res) => {
        console.log(res.data.data);
        this.currentPage1 = val;
        this.tableData = [...res.data.data];
      });
    },
  }
}
</script>