vue と element-ui を使用してテーブル コンテンツのページングを実装する方法

以下に、vue と element-ui を使用してテーブルコンテンツのページネーションを設定する例を紹介します。これは非常に参考になるものであり、皆さんのお役に立てれば幸いです。

htmlコード

テンプレートに書いたので、つまり新しい構造を作成してコードを投稿しました。

<el-pagination 
 small
 layout="prev, pager, next"
 :total="total" 
 @current-change="current_change">
</el-pagination>

コード内で、small はスモール ページング スタイルを使用するかどうかを表します

layout はコンポーネントのレイアウトを表し、サブコンポーネント名はカンマで区切られます

属性: total はエントリの合計数を表します

イベント: 現在-change はページ番号の変更を監視するために使用され、コンテンツも変更されました

その他の属性は要素の公式 API で見つけることができます

http://element.eleme.io/#/zh-CN/component/pagination

リッスン方法はmethodsに記述します

methods:{
 created:function(){
  //加载班级的数据
   var url ='http://127.0.0.1:3000/clazz/findAll';
   //向后台获取数据
   var vm = this;
   $.getJSON(url,function(data){
    vm.clazzInfo = data;
    vm.total = data.length;//设置数据总数目！！！
   }); 
  },
 current_change:function(currentPage){
    this.currentPage = currentPage;
  }
}

URLはバックグラウンドでexpressが構築した足場によって設定されたルートです。

dataで使用するデータを登録します

グローバルに登録したのでdataはオブジェクトを返す関数です

data:function(){
   return {
    total:0,//默认数据总数
    pagesize:7,//每页的数据条数
    currentPage:1,//默认开始页面
   }
  }

データをtbodyにバインドします

<el-table :data="searchInfo.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">

ここでsearchInfoは取得した配列ですバックグラウンドデータ。

上記は私があなたのためにまとめたものです。

関連記事:

axiosのインターセプト設定とエラー処理の対処方法は？

axios を使用して、vue.js を通じてダウンロード機能を実装します (詳細なチュートリアル)

IE での axios の互換性問題を完全に解決します 具体的な解決手順は次のとおりです

以上がvue と element-ui を使用してテーブル コンテンツのページングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。