element table 分页显示table数据信息

el-table  实现分页

代码实现 ：

script代码实现：

定义变量值：

currentPage: 1,

pageSize: 5,
totalSize: 1, （所用到的变量自己定义，此处不全）

 

methods:{
//用户信息获取
doAxios: function (PageSize, CurrentPage, url,yhid) {
  this.loading = true;//初始化加载loading效果
  let paginData = {
    pageSize: PageSize,
    currentPage: CurrentPage,
  };
  axios({
    method: 'post',
    url: url,
    params: {
      jsonStr: JSON.stringify(paginData)
    }
  }).then((response) => {
    this.loading = false;//取消loading效果
    this.TotalSize = parseInt(response.data.totalSize);
    this.userListTableData = response.data.list;
  }).catch(function (error) {
    this.loading = false;//取消loading效果
    this.$message.error("系统错误,请联系开发人员！");
  });
},

handleSizeChange(val) {
  this.pageSize = val;
  this.doAxios(this.pageSize, 1, this.url,this.yhid);
  this.currentPage = 1;//每次改变每页多少条都会重置当前页码为1
  console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
  this.currentPage = val;
  this.doAxios(this.pageSize, this.currentPage, this.url,this.yhid );
  console.log(`当前页: ${val}`);
},

},

mounted() {
   this.url = 'http://192.168.100.163:8082/dxglpt/getUserList';
  this.doAxios(this.pageSize, this.currentPage, this.url,this.yhid);
},