关于Element-UI分页的使用和使用中的问题及解决方法

Element-UI分页基本用法

参照官方文档，如下

相关参数文档也说明得很清楚了
配合使用显示数据
代码如下：

el-table 代码块

//userList 绑定的数据
<el-table :data="userList" border stripe>
        <el-table-column type="index"></el-table-column>
        //prop 为这一列绑定数据
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="角色" prop="role_name"></el-table-column>
</el-table>

el-pagination 分页代码块

<el-pagination
		//参数说明查看文档
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 7]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
</el-pagination>

vue中的data代码块(组件中)

<script>
exoprt default {
data(){
	return {
		queryInfo: {
	       query: '',
	        //当前的页数
	        pagenum: 1,
	        // 当前每页显示的数据
	        pagesize: 2
	      },
	      //前台测试数据
	      //实际可从服务器接口调用数据
	      userList:[
	        {
	          id: 1,
	          username: 'admin',
	          email: '[email protected]',
	          mobile: '12345678',
	          role_name: '超级管理员'
	        },
	        {
	          id: 2,
	          username: '测试用户1',
	          email: '[email protected]',
	          mobile: '1111111111',
	          role_name: '测试用户'
	        },
	        {
	          id: 3,
	          username: '测试用户2',
	          email: '[email protected]',
	          mobile: '2222222222',
	          role_name: '测试用户'
	        }
	      ],
	      //前台测试数据
	      //实际可从服务器接口调用总数
	      total: 3
	    }
	}
},
methods: {
	//每页的数据条数
	//在el-pagination的layout里的设置sizes可以显示设置条数
	//通过pag-sizes设置间隔
	handleSizeChange(newSize){
      this.queryInfo.pagesize = newSize;
      //若是从后台请求的数据，修改了每页的数据条数之后再向后台请求一次数据
      //重新请求数据
    },
    // 监听页码改变
    handleCurrentChange(newPage){
      this.queryInfo.pagenum = newPage;
      //若是从后台请求的数据，修改了每页的数据条数之后再向后台请求一次数据
      //重新请求数据
    }
}

效果如下

遇到的问题

当改变每页显示的条数时，即手动修改 queryInfo里的pagesize时，还是显示userList里的全部数据，表格并没有根据自己设置的数量进行按需显示。

解决方法

前台方法

手动分割传来的数据
如下：

:data="userList.slice((queryInfo.pagenum-1)*queryInfo.pagesize,queryInfo.pagenum*queryInfo.pagesize)"

以上，问题解决！