Vueはテーブルページング機能を実装します

Vueはテーブルページング機能を実装します

この記事では、テーブルページング機能を実現するためのVueの具体的なコードを例として紹介します。具体的な内容は以下のとおりです。

コード上で直接:

こちらはテンプレート部分です。主にページ区切りが必要なテーブルとページネーターから構成されます。重要な点は、テーブルのデータ属性がスライスインターセプション方式を使用していることです。

<el-テーブル
        v-loading="リスト読み込み中"
        :データ="
          list.slice((現在のページ - 1) * ページサイズ、現在のページ * ページサイズ)
        「
        element-loading-text="読み込み中"
        現在の行をハイライト
        国境
      >
        <el-table-column align="center" label="シリアル番号" width="90">
          <テンプレート スロット スコープ="スコープ">
            {{ スコープ.$index + 1 }}
          </テンプレート>
        </el-table-column>
        <el-table-column label="アバター" align="center" width="150">
          <テンプレート スロット スコープ="スコープ">
            <el-avatar :src="scope.row.avatar"></el-avatar>
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="UID" width="130">
          <テンプレート スロット スコープ="スコープ">
            {{ スコープ.行.UID }}
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="ユーザー名" width="350">
          <テンプレート スロット スコープ="スコープ">
            {{ スコープ.行.ユーザー名 }}
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="ゲームID" width="350">
          <template slot-scope="scope"> {{ scope.row.usernick }} </template>
        </el-table-column>
        <el-table-column label="認証タイプ" width="110" align="center">
          <テンプレート スロット スコープ="スコープ">
            <el-tag :type="scope.row.authorizationType | tagTypeFilter">{{
              スコープ行の認可タイプ | 認可タイプフィルター
            } </el-tag>
          </テンプレート>
        </el-table-column>
        <el-table-column align="center" label="成功した招待の数" width="150">
          <テンプレート スロット スコープ="scope">{{ scope.row.successNum }} </テンプレート>
        </el-table-column>
        <!-- <el-table-column align="center" label="操作" width="150">
          <テンプレート スロット スコープ="スコープ">
            <el-ボタン
              タイプ="プライマリ"
              サイズ="ミニ"
              @click="change(scope.$index, scope.row)"
            >
              変更</el-button>
          </テンプレート>
        </el-table-column> -->
      </el-table>
      <!-- ページネーター -->
      <div class="block" style="margin-top: 15px">
        <el-ページネーション
          align="right"
          @current-change="現在の変更を処理する"
          :current-page="現在のページ"
          :page-size="ページサイズ"
          レイアウト="前へ、ページャ、次へ、合計"
          背景
          :total="フィルターリストの長さ"
          単一ページで非表示
        >
        </el-pagination>
</div>

以下は JavaScript 部分です:

エクスポートデフォルト{
    データ(){
        戻る {
            currentPage:1//現在のページ番号 pageSize:10//ページあたりに表示される項目数 list:[]//表示されるテーブルデータ}
        }
 
    方法{
            現在の変更を処理する(val) {
            this.currentPage = val;
        },
    }
 
}

図のような効果が得られます

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue2.0+ElementUI+PageHelperで実装されたテーブルページング機能
  • Vue+ElementUI テーブルはテーブルページングを実現します
  • Vue+Element UI+Lumenはユニバーサルテーブルページング機能を実装します
  • vue + 要素を使用してテーブルページングとフロントエンド検索を実装する方法
  • Vue Cli と BootStrap を組み合わせてテーブルページング機能を実装する
  • Javascript vue.js テーブルページング、Ajax データの非同期読み込み
  • Vue.js テーブル ページング Ajax データの非同期読み込み
  • Vue.js テーブルページングの例
  • Vue.js ベースのテーブル ページング コンポーネント

<<:  Linux で Apache を使用してファイル サーバーを構築する手順

>>:  HTML テーブルタグチュートリアル (44): テーブルヘッダータグ

推薦する

Vue+nodeはオーディオ録音・再生機能を実現

結果: コードロジックを実装するのが主な部分であり、具体的なページ構造を一つ一つ紹介することはありま...

Docker バインディング固定 IP/クロスホストコンテナ相互アクセス操作

序文これまでは、パイプワークで割り当てた静的 IP は一時的なものであり、再起動すると無効になってい...

JavaScript の遅延読み込み属性パターンに関する簡単な説明

目次1. はじめに2. オンデマンド属性モード3. 乱雑な遅延読み込み属性パターン4. クラスの唯一...

CentOS6.5にpython3.7をインストールする詳細な手順

1. Python 3をダウンロードする https://www.python.org/ftp/py...

Ubuntu 16.04 サーバーで MySQL を設定し、リモート接続を有効にする方法

背景最近、Node.js を勉強しているのですが、クラウド サーバーがあることを思い出しました。しか...

Reactでファイルパスエイリアスを素早く設定する方法

React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。F...

「fsck」を使用して Linux のファイルシステムエラーを修正する方法

序文ファイル システムは、データの保存方法と復元方法を整理する役割を担います。 いずれにせよ、時間の...

vue3のテレポート瞬間移動機能の使い方を詳しく解説

vue3テレポート瞬間移動機能の使用は参考用です。具体的な内容は次のとおりです。テレポートは通常、瞬...

vue-router のハッシュモードと履歴モードの違い

vue-routerには2つのモードがありますハッシュモード履歴モード1. シングルページアプリケー...

node.js で PC 上の WeChat アプレット パッケージを復号化するための処理アイデア

目次アプレットのソースコードはどこにありますか? PC ミニプログラムはどのように暗号化されますか?...

yumコマンドの使い方

1. yumの紹介Yum (フルネームは Yellow dogUpdater、Modified) は...

良い広告にはどのような特徴が必要ですか?

広告業は人間であることに似ていると言う人がいます。これは本当です。優れた広告には、優れた人間と同じよ...

画像を表示したり非表示にしたりするための JavaScript

JavaScriptは画像を表示したり非表示にしたりしますが、参考までに具体的な内容は次のとおりで...

Vue3 での watchEffect の使用に関する簡単な分析

序文誰もが vue2 の watch API に精通している必要があります。vue2 の vue イ...

リモートログインとポート公開を防ぐためのLinuxサーバー構成IPホワイトリスト

序文ブロガーが使用しているサーバーは Alibaba Cloud から購入したものです。実際、Ali...