主に私が新しいことを学ぶのに忙しく、それを共有するのを忘れていたからです。私は本当に恥ずかしいです。
ほら、私は真夜中に記事を投稿し、私が書いたBootpageというVueウィジェットを共有しました。
Vue.jsがわからない場合は、以前の記事「Vue.jsについての簡単な講演」に移動して、それについて学ぶことができます。
ブートページコンポーネントの紹介
実際、それはハイエンドコンポーネントではありません。それどころか、それは本当に単なる単純なテーブルページングコンポーネントです。これは主に、最近のプロジェクトにテーブルページングコンポーネントが必要だからです。 VUE公式コンポーネントライブラリページネーションコンポーネントは強すぎるか、私には適していないので、私はそれを作るために自分自身を書きました。たぶん、私のような誰かが、シンプルなページング関数を実装するためにそのような単純なページングコンポーネントを必要としています。ここで共有すると、誰もがピットを埋めます。
ハイエンドコンポーネントが必要な場合は、公式のVueコンポーネントライブラリに移動できます：https：//github.com/vuejs/awesome-vue#libraries-プラギン
BootPageは、静的データとサーバーデータをサポートするテーブルページングコンポーネントです。各ページに表示される行数と表示されるページ数の調整をサポートします。このスタイルは、このようにブートストラップに基づいています。
オンラインデモンストレーション：https：//luozhihao.github.io/b ...
使い方
.vueコンポーネントファイルでは、このようなテンプレート、つまりHTMLコードを書きます。
<table> <thead> <tr> <th> id </th> <th> name </th> <th> content </th> <th> verme </th> </tr> </thead> <tbody> <tfody> <ttr v-for = "data in tablelist"> <td v-text = "data.num"> </td> <td v-text = "data v-text = "data.contents"> </td> <td v-text = "data.Remark"> </td> </tbody> <tfoot> <tr> <td colspan = "4"> <div> <ボタンv-on： "reffresse"> refresh ">更新</button> </div> <div> <boot-page =" "：" "：" " ：page-len = "pagelen"：param = "param"> </boot-page> </div> </td> </td> </tfoot> </table>
<boot-Page>タグでは、ASYNCとは、サーバー側からデータを取得するかどうかを指します。データは静的な表形式データアレイです。レンズは、ページごとに表示される行の配列です。 Page-lenは、表示できるページ数です。
静的データを使用するJavaScriptコード、つまりスクリプトタグの内容は次のとおりです。
<script> bootpageから './components/bootpage.vue' Export default {data（）{return {lenarr：[10、50、100]、// pagelenあたりの表示長：5、//表示できるページ数の表示数：[{num：1、著者： 'luozh'、contents： 'botage as statents： 'dsds'}、{num：2、著者： 'luozh'、contents： 'ページごとに表示される行数と表示されるページ数を調整するためのサポート。スタイルはBootstrap '、bootstrapに基づいています：' dsds '}、{num：3、著者：' luozh '、contents：' <boot-page> tag asyncは、サーバー側からのデータを取得する、false is no '、beart：' dsds '}、{dsds'}、{num：4、著者： 'luozh'、 'luozh：' conted： 'dsds'}、{num：5、著者： 'luozh'、contents： 'lensはページごとに表示される行の配列です'、berek： 'dsds'}、{num：6、 'luozh'、contents： 'page-lenは表示されるページの数です' 'サーバーの返されたパラメーターは{data：[]、page_num：6}、ここで、データは表のデータであり、page_numはページの総数'、berek： 'dsds'}、{num：8、著者： 'luozh'、compintents： 'call this call s.page.refresh（）the table date' '' dsds '、' dsdsサーバーデータを使用するときにテーブルリストを使用する必要があります：[] //ページネーションコンポーネントによって返されたデータのポストページング}}、コンポーネント：{bootpage}、イベント：{//ページネーションコンポーネントによって返されたテーブルデータ一般に、静的表形式データを使用することはめったになく、ほとんどのアプリケーションのデータはサーバー側から取得されるため、サーバーページネーションデータを取得する方法を次に示します。
サーバーデータを使用するコンポーネントHTMLは次のとおりです。
<boot-page v-ref：page：async = "true"：lens = "lenarr"：url = "url"：page-len = "pagelen"：param = "param"> </boot-page>
ここで、URLはサーバーの要求アドレスです。 PARAMは、サーバーに送信する必要があるパラメーターオブジェクトです。
サーバーデータJavaScriptを使用したコードは次のとおりです。
<script> bootpageから './components/bootpage.vue' export default {data（）{return {lenarr：[10、50、100]、//ページあたりのディスプレイ長ペイジェレン：5、// urlを表示できるページ数： '/bootpage/'、// request path patagrad：{} {} {} {}、pass part partis firaページネーションコンポーネントに戻る}}、メソッド：{refresh（）{this。$ refs.page.refresh（）//テーブルリフレッシュ関数はここに提供されます}}、コンポーネント：{bootpage}、イベント：{//ページネーションコンポーネントによって返されるテーブルデータ（ここで返されたデータ） （）{this.refresh（）}}}} </script>注：コンポーネントテーブルに渡された配列コンテンツに加えて、サーバーはPage_numという名前のページの総数のキー名も必要です。
コンポーネントがサーバーに付属するパラメーターは次のとおりです。
{
アクティブ：1、//現在のページ番号
長さ：5 //ページごとに表示される数
}
サーバーリターンのパラメーターは次のとおりです。
{
データ：[]、//表データ
page_num：5 //合計ページ数
}
コンポーネントソースコード
ページネーションの実装については、ここでソースコードを表示しません。すべてのソースコードをgithubにアップロードしました。アドレスはhttps://github.com/luozhihao/bootpageです。
事前に思い出させてください。このコンポーネントを運転するのに数時間かかったので、Vueコンポーネントの書面での形式と仕様が不十分であり、完全に独立していないため、意識的にピットを埋めます。ここでのみ共有します。
もちろん、プロジェクトの使用に合わせてコンポーネントのコードを意志で変更することもできます。結局のところ、大規模で完全なページングコンポーネントを実装することはまだ非常に複雑です。
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。