Vue プロジェクトがページング効果を実現

npm i 要素UI -S

「element-ui」からElementUIをインポートします。
'element-ui/lib/theme-chalk/index.css' をインポートします。

Vue.use(ElementUI) // 要素の UI をグローバルにハングする

<テンプレート>
 <div class="block">
 <el-ページネーション
  @current-change="現在の変更を処理する"
  :current-page="現在のページ"
  :ページサイズ="6"    
  レイアウト="前へ、ページャー、次へ、ジャンパー"
  :total="合計"
  :pager-count="5"
 >
 </el-pagination>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 props: ["num", "page"], //渡されたエントリの合計数とページ番号 data() {
 戻る {};
 },
 計算: {
 現在のページ: 関数() {
  this.page を返します。
 },
 合計: 関数() {
  this.num を返します。
 }
 },
 メソッド: {
 ハンドルサイズ変更(val) {
  this.$emit("size-change", val);
 },
 現在の変更を処理する(val) {
  this.$emit("current-change", val);
 }
 }
};
</スクリプト>

<スタイル>
。ブロック {
 テキスト配置: 右;
 /* 幅: 100%; */
}
</スタイル>

<テンプレート>
 <div class="mobild">
  <div>
  <ATableページング
   :num="数値"
   :page="ページ"
   @current-change="(val) => { 
   ページ = val;
   リスト（）;
   }"
  </ATablepaging> ...
  </div>
 </div>
</テンプレート>

<スクリプト>
import ATablePaging from "../paging"; //ページングコンポーネントを導入する export default {
 データ（） {
 戻る {
  page:"", //現在のページ番号 num: 1, //コンテンツ項目の合計数};
 },
 メソッド: {
 リスト() {
  //バックエンドによって返されるページの総数はnumに等しい
 },
 },
 マウント() {
 this.news();
 },
 コンポーネント:
 Aテーブルページング
 }
};
</スクリプト>

<スタイルスコープ>
</スタイル>