Vueの+ elementUI + Laravelはページングを実装します

Laravelフレーム制御方法：

/ *
     *学生一覧
     *リクエストメソッド：GET
     *パラメータ：ヌル
     * * / 
    パブリック 関数studentLists（）{
         $データ =学生:: studentLists（）;
        foreachの（$データ として $ K => $ V ）{
             $データ [ $ K ] [ 's_sex'] = $ V [ 's_sex'] == 1？'男'： '女' 。
            $データ [ $ K ] [ 's_img'] = 'http://www.1707laravel.com/'。$ V [ 's_img' ];
        }
        リターン [ 'コード' => 0、 'MSG' => 'クエリ成功'、 '結果' => $データ];
    }

方法Laravelフレームワークモデル層

パブリック 静的 関数studentLists（）{
         戻り自己:: 参加（ 'ルーム'、 'student.class_id'、 '='、 'room.c_id'） - >のpaginate（2 ）。
    }

Vueのページのコード例

<テンプレート>
    <div>
        <H1>リスト</ H1>
        <EL- テーブル
        ：データ = "たtableData" 
        スタイル = "幅：100％">

            <EL-テーブル- コラム
                小道具 = "ID" 
                ラベル = "主键ID" 
                幅 = "180">
            </ EL-テーブル列>

            <EL-テーブル- コラム
                小道具 =「アドレス」
                ラベル =「個人写真」>
                <テンプレートスロットスコープ=「imgObj」>
                    <IMG：SRC = "imgObj.row.s_img" 幅= "80" 高さ= "80" ALT = "">
                </テンプレート>
            </ EL-テーブル列>

            <EL-テーブル- コラム
                小道具 = "s_name" 
                ラベル = "学生姓名" 
                幅 = "180">
            </ EL-テーブル列>

            <EL-テーブル- コラム
                小道具 =「s_sex」
                ラベル =「学生セックス」>
            </ EL-テーブル列>

            <EL-テーブル- コラム
                小道具 =「s_age」
                ラベル =「学生時代」>
            </ EL-テーブル列>

            <EL-テーブル- コラム
                小道具 =「c_name」
                ラベル =「クラス」>
            </ EL-テーブル列>

            <EL-テーブル- コラム
                小道具 =「s_address」
                ラベル =「生誕地住所」>
            </ EL-テーブル列>

        </ EL-表>

        <EL- ページネーション
        バックグラウンド 
        レイアウト = "PREV、ページャ、次の"  
        ：ページ -size = "pageSizeを" 
        ：合計 = "合計" 
        @current -change = "1"
        >
        </ EL-ページネーション>
    </ div>
</テンプレート>

<スクリプト> 
    輸出デフォルト{
      データ（）{
        リターン{
          たtableData：[]、
          合計： 0、// ストリップの総数 
          のpageSize：0、// ページショー個数
        }
      }、
      作成した（）{
          VAR OBJ = この;
           // このメソッドは、ページが終了したときの初期化動作を行い表し
          、この $のaxios.get（「/ API /学生一覧表示」を。）
          .then（関数（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）。
          }）
      }、
      方法：{
          一方（ヴァル）{
            VAR OBJ = この;
            この。$のaxios.get（ '/ API /学生・リスト？ページ=' + val）で
            .then（関数（RES）{
                obj.tableData = res.data.result.data。
            }）
          }
      }
    }
  </ SCRIPT>

レンダリング：