ホームページ > 記事 > ウェブフロントエンド > 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 を使用して、vue.js を通じてダウンロード機能を実装します (詳細なチュートリアル)
IE での axios の互換性問題を完全に解決します 具体的な解決手順は次のとおりです
以上がvue と element-ui を使用してテーブル コンテンツのページングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。