7、vue+element-ui中的分页函数

1、html结构：

<el-pagination

          @size-change="handleSizeChange"

          @current-change="handleCurrentChange"

          :current-page="tablePage.currentPage"

          :page-sizes="[10,50,100,200,500,1000]"

          :page-size="tablePage.pageSize"

          layout="total, sizes, prev, pager, next, jumper"

          :total="tablePage.total">

 </el-pagination>

2、data中return的数据：

tablePage: {

        currentPage: 1,

        pageSize: 10,

        total: 0

}

3、发送请求需要携带分页数据

函数名() {

      let param = {

        params: {

          pageIndex: this.tablePage.currentPage,

          pageSize: this.tablePage.pageSize

           }

      }

      axios.get('请求地址', param).then(response => {

        this.tablePage.total = response.data.total

      })

},

4、选择下一页或者每页显示数据条数时触发的函数

handleSizeChange (val) {

      this.tablePage.pageSize = val

      this.requestCourseList()    // 重新调用请求的函数

},

handleCurrentChange (val) {

      this.tablePage.currentPage = val

      this.requestCourseList()    // 重新调用请求的函数

},