最完整版的element分页实现管理

==记录一下踩坑日常：
这次使用的是前端Vue的element分页组件：
1：分页
2：跳转指定页码
3：更改每页数据条数
4：点进详情页返回原页码(改变每页条数也返回原界面)

      <el-pagination class="mpage" :model="current" ref="current"
                     background
                     @size-change="handleSizeChange"
                     @current-change="page"
                     :current-page="current.currentPage"
                     :page-sizes="[10, 20, 50]"
                     :page-size="current.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="current.total">
      </el-pagination>

在界面上添加分页样式组件，这个在element官网上有的。
这里自己设置了三个每页条数规格的下拉框
然后设置数据分页默认值：

  data() {
    return {
      current: {
        //默认
        currentPage: 1,//页码
        val: 10,//多少条/每页
        total: 0,//总共多少条
        pageSize: 10//每页多少条数据
      },
      BBS: {}
    }
  },

添加page方法，再在自动加载里面添加this.page(1)方法。

    page(value) {
      const _this = this
      this.current.currentPage = value

      _this.$axios.post("/bbs/bbs", this.current, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        // _this.$axios.get("/bbs/bbs?currentPage=" + currentPage).then(res => {
        // console.log(res)
        //将页码储存在session中，方便点击详情页后返回在原来页码
        _this.$store.commit("SET_PAGENUMBER", this.current)

        _this.BBS = res.data.data.records
        _this.current.currentPage = res.data.data.current
        _this.current.total = res.data.data.total
        // _this.current.pageSize = res.data.data.size
      })
    }

这里传的value是获取的当前页码，然后调用后端接口：

    //分页处理
//    @RequiresAuthentication
    @PostMapping("/bbs")
    public Result list(@Validated @RequestBody Object object) {
        Map<String, Integer> re = (Map<String, Integer>) object;
        Integer currentPage = Integer.valueOf(re.get("currentPage"));
        Integer val = Integer.valueOf(re.get("val"));

        Page page = new Page(currentPage, val);
        IPage pageData = bbsService.page(page, new QueryWrapper<Bbs>().orderByDesc("id"));

        return Result.succ(pageData);
    }

将获取到的数据倒序排列然后返回给页面，这样一个基本的分页就实现了。

    // 更改每页显示条数
    handleSizeChange(val) {
      const _this = this
      this.current.val = val;//获取page-sizes里的每页显示几条数据的值，赋给我们自定义的每页显示数量的变量pageNum
      this.current.pageSize = val //更新每页条数数据
      // console.log(`每页 ${val} 条`);
      console.log("this.current==" + JSON.stringify(this.current))
      _this.$axios.post("/bbs/bbs", this.current, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        // _this.$axios.get("/bbs/bbs?currentPage=" + currentPage).then(res => {
        // console.log(res)

        _this.$store.commit("SET_PAGENUMBER", this.current)

        _this.BBS = res.data.data.records
        _this.current.currentPage = res.data.data.current
        _this.current.total = res.data.data.total
        // _this.current.pageSize = res.data.data.size
      })
    },

然后在methods中添加handleSizeChange方法，val是获取当前页面选择的每页条数，如果不自己定义，他的默认值是

这里我们自定义三个就可以了，this.current.pageSize = val这条记得要添加上去！！因为我们点进数据详情页面后返回回来如果没有这条的话，他只记住了页码，并不能完全达到我们的期望效果，如果我们选择十条每页，就发现不了这个问题，如果选择二十条每页，在页码2，那么返回回来就是十条每页的页码2，与我们期望不符。
_this.$store.commit(“SET_PAGENUMBER”, this.current)
这里我们是把分页数据储存在session中，返回页面时再去取出来，以达到返回依旧在原界面的效果。
这是在store的index中自定义的：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        token: '',
        userInfo: JSON.parse(sessionStorage.getItem("userInfo")),
        pageNumber: JSON.parse(sessionStorage.getItem("pageNumber"))
    },
    mutations: {
        // set
        SET_TOKEN: (state, token) => {
            // console.log("token=="+token)
            state.token = token
            // console.log("state=="+JSON.stringify(state))
            localStorage.setItem("token", token)
            // console.log("localStorage"+JSON.stringify(localStorage))
        },
        SET_USERINFO: (state, userInfo) => {
            state.userInfo = userInfo
            sessionStorage.setItem("userInfo", JSON.stringify(userInfo))
        },
        REMOVE_INFO: (state) => {
            state.token = ''
            state.userInfo = {}
            localStorage.setItem("token", '')
            sessionStorage.setItem("userInfo", JSON.stringify(''))
        },
        SET_PAGENUMBER: (state, pageNumber) => {
            state.pageNumber = pageNumber
            sessionStorage.setItem("pageNumber", JSON.stringify(pageNumber))
        }
    },
    getters: {
        // get
        getUser: state => {
            return state.userInfo
        },
        getUsers: state => {
            return state.token
        },
        getPage: state => {
            return state.pageNumber
        }

    },
    actions: {},
    modules: {}
})

再在created中添加自动加载方法定义：

  created() {
    const pageNumber = localStorage.getItem("pageNumber")
    // 判断是否第一次进去页面
    if (pageNumber){
      const pageNum = JSON.parse(sessionStorage.pageNumber).currentPage
      const pageVal = JSON.parse(sessionStorage.pageNumber).val
      this.current.val = pageVal
      this.current.pageSize = JSON.parse(sessionStorage.pageNumber).pageSize
      this.page(pageNum)
      this.handleSizeChange(pageVal)
    }else {
      this.page(1)
    }
  }

这样就完成了无论我们选择每页多少条数据进入详情页返回依旧是原来的模样了。应该是比较完整的一块分页管理了。