この記事では、テーブルページング機能を実現するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で Apache を使用してファイル サーバーを構築する手順
>>: HTML テーブルタグチュートリアル (44): テーブルヘッダータグ
結果: コードロジックを実装するのが主な部分であり、具体的なページ構造を一つ一つ紹介することはありま...
序文これまでは、パイプワークで割り当てた静的 IP は一時的なものであり、再起動すると無効になってい...
目次1. はじめに2. オンデマンド属性モード3. 乱雑な遅延読み込み属性パターン4. クラスの唯一...
1. Python 3をダウンロードする https://www.python.org/ftp/py...
背景最近、Node.js を勉強しているのですが、クラウド サーバーがあることを思い出しました。しか...
React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。F...
序文ファイル システムは、データの保存方法と復元方法を整理する役割を担います。 いずれにせよ、時間の...
vue3テレポート瞬間移動機能の使用は参考用です。具体的な内容は次のとおりです。テレポートは通常、瞬...
vue-routerには2つのモードがありますハッシュモード履歴モード1. シングルページアプリケー...
目次アプレットのソースコードはどこにありますか? PC ミニプログラムはどのように暗号化されますか?...
1. yumの紹介Yum (フルネームは Yellow dogUpdater、Modified) は...
広告業は人間であることに似ていると言う人がいます。これは本当です。優れた広告には、優れた人間と同じよ...
JavaScriptは画像を表示したり非表示にしたりしますが、参考までに具体的な内容は次のとおりで...
序文誰もが vue2 の watch API に精通している必要があります。vue2 の vue イ...
序文ブロガーが使用しているサーバーは Alibaba Cloud から購入したものです。実際、Ali...