Vue+elementUI+Laravel實現分頁

Laravel框架控制器方法：

/*
     * 學生信息列表
     * 請求方式：get
     * 參數：null
     * */
    public function studentLists(){
        $data = Student::studentLists();
        foreach ($data as $k=>$v){
            $data[$k]['s_sex'] = $v['s_sex'] == 1 ? '男' : '女';
            $data[$k]['s_img'] = 'http://www.1707laravel.com/'.$v['s_img'];
        }
        return ['code'=>0,'msg'=>'查詢成功','result'=>$data];
    }

Laravel框架模型層方法

public static function studentLists(){
        return self::join('room','student.class_id','=','room.c_id')->paginate(2);
    }

Vue頁面代碼示例

<template>
    <div>
        <h1>列表</h1>
        <el-table
        :data="tableData"
        style="width: 100%">

            <el-table-column
                prop="id"
                label="主鍵id"
                width="180">
            </el-table-column>

            <el-table-column
                prop="address"
                label="個人照片">
                <template slot-scope="imgObj">
                    <img :src="imgObj.row.s_img" width="80" height="80" alt="">
                </template>
            </el-table-column>

            <el-table-column
                prop="s_name"
                label="學生姓名"
                width="180">
            </el-table-column>

            <el-table-column
                prop="s_sex"
                label="學生性別">
            </el-table-column>

            <el-table-column
                prop="s_age"
                label="學生年齡">
            </el-table-column>

            <el-table-column
                prop="c_name"
                label="所在班級">
            </el-table-column>

            <el-table-column
                prop="s_address"
                label="籍貫地址">
            </el-table-column>

        </el-table>

        <el-pagination 
        background 
        layout="prev, pager, next" 
        :page-size="pageSize"
        :total="total"
        @current-change="one"
        >
        </el-pagination>
    </div>
</template>

<script>
    export default {
      data() {
        return {
          tableData: [],
          total:0,//總條數
          pageSize:0, //每頁顯示條數
        }
      },
      created(){
          var obj = this;
          //這個方法表示的是初始化頁面完成的時候執行的操作
          this.$axios.get('/api/student-lists')
          .then(function(res){
              //獲取到表格數據
              obj.tableData = res.data.result.data;
              obj.total = res.data.result.total;
              obj.pageSize = res.data.result.to;
            //   console.log(res.data.result.data);
          })
      },
      methods:{
          one(val){
            var obj = this;
            this.$axios.get('/api/student-lists?page='+val)
            .then(function(res){
                obj.tableData = res.data.result.data;
            })
          }
      }
    }
  </script>

效果圖：