vue后台管理系统分页

页面结构：

        <el-pagination background layout="prev, pager, next" v-show="total/10>1?true:false" :total="total"

          :current-page="pn" :page-size="ps" @size-change="handleSizeChange"

          @current-change="handleCurrentChange"></el-pagination>

 

需要的变量：

pn: 1, // 当前页数

ps: 10, // 一页有多少数据(设备列表)

total: 10, // 总条数

事件操作：

//监听每页的条数

    handleSizeChange (ps) {

      this.ps = ps

      this.findActivateRecordList()//发送请求事件

    },

    //监听当前页数

    handleCurrentChange (pn) {

      this.pn = pn

      this.findActivateRecordList()

    },

 拿到分页参数请求数据：

findActivateRecordList () {

      let datas = {

        startTime: "",

        endTime: "",

        keyword: "",

        pn: this.pn,

        ps: this.ps,

      };

      findActivateRecordList(datas).then((res) => {

        if (res && res.code == 0) {

          this.$message({

            type: "error",

            message: res.message,

          });

        } else {

          this.activateRecordList = res.list;

          console.log(res);

          this.total = res.total;

        }

      });

    },