工作笔记之前端实现分页

工作笔记之前端实现分页

页面部分

	  "loading" :data="tableData.slice((page-1) * this.limit, page * this.limit)">
        "userId" label="姓名" align="center">
        .....
        
        " *** 作"
     	>
        
      

      
      
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

数据初始化部分

data() {
    return {
      page: 1, // 当前页数
      limit: 10, // 当前条数
      total: 0, // 总条数
      tableData: ''
      }
  }

方法调用和数据获取部分

	getListTableData() {
      this.tableData.slice(
        (this.page - 1) * this.limit,
        this.page * this.limit
      )
      this.total = this.tableData.length
    },
    // 处理当前页面
    handleCurrentChange (page) {
      this.page = page
      this.getListTableData()
    },
    // 处理页面条数的变化
    handleSizeChange (val) {
      this.limit = val
      this.page = 1
      this.getListTableData()
    },
    //获取数据
     getAssWorkCountDetail(data) {
      return request({
        url: 'api/assWorkcount/getAssWorkCountDetail',
        method: 'get',
        params: {
          userId: data.userId,
          startTime: this.queryTime[0],
          endTime: this.queryTime[1]
        }
      }).then(res => {
        this.tableData= res.rows
        this.total = this.tableData.length
        //this.detailAssWorkDays = true
        //this.total = res.total
        // console.log(this.Names)
      })
    }

学习自前端大佬