在vue中如何使用element组件的分页器(mongodb+node+vue)

html部分

<!--分页器-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="num">
      </el-pagination>

vue中data内部:pageSize为每页展示多少条,numSkip为第几页

num:0,
        pageSize:5,
        numSkip:0,
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,

methods部分

//每页展示条数
      handleSizeChange(val) {
        console.log(val);
        //每次点击更改条数值
        this.pageSize = val;
        this.axios.get('http://localhost:3000/userTable?number='+this.pageSize+'&skipPage='+this.numSkip).then((data)=>{
          this.tableData=[];
          for (let i = 0; i < data.data.length; i++) {
            this.tableData.push(data.data[i]);
          }
        });
      },

//指定页码
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        //每次点击更改页码值
        this.numSkip = val;
        this.axios.get('http://localhost:3000/userTable?skipPage='+this.numSkip+'&number='+this.pageSize).then((data)=>{
          this.tableData=[];
          for (let i = 0; i < data.data.length; i++) {
            this.tableData.push(data.data[i]);
          }
        });
      },

接下来就是服务端部分了:
在这里因为浏览器的同源策略,所以为了跨域共享，所以先配置cors中间件

//跨域解决
var cors = require('cors');
//初始化
app.use(cors());

然后再express下的route路由中访问数据库接口
通过前台拼接的值，num为每页展示条数 numSkip为第几页

//指定页码分页查询
//分页查询
app.all('/userTable',(req,res,next)=>{
    num = parseInt(req.query.number);
    numSkip = parseInt(req.query.skipPage);
    user.find({},(error,data)=>{
        res.send(data);
    }).skip(numSkip).limit(num).sort({userRegistTime:-1});//对结果默认排序
});