element分页

获取数据信息，这是表格和分页内容

<el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="xuhao" label="序号"></el-table-column>
            <el-table-column prop="createDate" label="日期"></el-table-column>
            <el-table-column prop="username" label="操作人"></el-table-column>
            <el-table-column prop="operation" label="操作人"></el-table-column>
            <el-table-column prop="ip" label="IP地址"></el-table-column>
          </el-table>
        </div>
        <div class="block" style="margin-top:15px;">
          <el-pagination align ="center" @size-change="handleSizeChange" @current-change="handleCurrentChange" 
          :current-page="currentPage" 
          :page-sizes="[5,10,20,50,100]" 
          :page-size="pageSize" 
          layout="total, sizes, prev, pager, next, jumper" 
          :total="msgTotal">
          </el-pagination>
        </div>
      </el-col>

注释：tableDate是表格数据内容

          currentPage: 1, // 当前页码

          msgTotal: 0, // 总条数

          pageSize: 10 // 每页的数据条数

加载方法：

methods:{
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.pageSize = val;
          this.currentPage = 1;
          this.getMessagesList(this.currentPage,val);
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.currentPage = val;
          this.getMessagesList(val,this.pageSize);
      },

      //分页方法（重点）
      getMessagesList(k,v){
        this.$axios.get("接口"+'/'+ k +'/'+ v).then((res) => {
          this.tableData=[];
        if(!res.data){
          this.$message.error(this.msg.message);
          
        }else{
          const date_list = res.data.data.list.reverse()
          this.currentPage = res.data.data.pageNum
          this.pageSize = res.data.data.pageSize
          this.msgTotal = res.data.data.total
          this.tableData = date_list.map((key,value)=>{
            // key.xuhao = value+1
            key.xuhao = (k*v -v + value)+1 //用于排序，后台返回时该遍历方式就不用写，直接赋值就行
            key.createDate = key.createDate
            key.username  = key.username
            key.operation  = key.operation
            key.ip  = key.ip
            return key
          })
        }
      })
      .catch((err) => {
        console.log(err);
      });
      }
    }

操作结果：