Vue+ElementUI table表格 + 分页

VUE+ElementUI中 常用的table表格

常见问题

1.table表格显示的数据该怎么写
	
	如图所示：

JS部分：

return {
      UserList: {
        total: 0,
        pageSize: 10,
        curPageNum: 1,
        order: 'asc',
        orderIndex: 'id',
        searchKey: null,
        searchValue: null,
        columnsIndex: ['name', 'role', 'description'],
        filterIndex: null,
        data: [
			{id: 0, name: "admin", role: "1", description: "administrator"}
			{id: 0, name: "control1", role: "3", description: "c1"}
			{id: 0, name: "control2", role: "3", description: "c2"}
			{id: 0, name: "log111", role: "4", description: "l1"}
			{id: 0, name: "log222", role: "4", description: "l2"}
			{id: 0, name: "system1", role: "2", description: "s1"}
			{id: 0, name: "system2", role: "2", description: "s2"}
			{id: 0, name: "control3", role: "3", description: "c3"}
			{id: 0, name: "system3", role: "2", description: "s3"}
			{id: 0, name: "log333", role: "4", description: "l3"}
		]
      },
	}

分页功能

分页代码：

  

JS部分：
handleCurrentChange (val) {
  this.UserList.curPageNum = val
},
handleSizeChange (value) {
  this.UserList.pageSize = value
},

分页常见问题：
如果选择每页50条数据，且页数为2，页面刷新后会回到初始设置的10条数据，且页数为1

解决方案：
利用sessionStorage可解决

代码部分：

created () {
    this.UserList.curPageNum = Number(sessionStorage.getItem('curPage')) || 1
    this.UserList.pageSize = Number(sessionStorage.getItem('pagesize')) || 10
  },
  beforeUpdate() {
    sessionStorage.setItem('curPage', this.UserList.curPageNum)
    sessionStorage.setItem('pagesize', this.UserList.pageSize)
  },

  beforeDestroy() {
    sessionStorage.setItem('curPage', '1')
    sessionStorage.setItem('pagesize','10')
  },

handleCurrentChange (val) {
      this.UserList.curPageNum = val
      sessionStorage.setItem('curPage',val)
    },
    handleSizeChange (value) {
      this.UserList.pageSize = value
      this.UserList.curPageNum = 1
      sessionStorage.setItem('pagesize',value)
    },

只是把自己做项目遇到的坑分享出来，如果有不懂的请下方评论，或者有更好的解决办法欢迎分享