Vueはボトムクエリ関数を実装します

Vueはボトムクエリ関数を実装します

この記事では、ボトムクエリ機能を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

1. vant-list コンポーネントの使用に関する関連内容は次のとおりです。

2. オブジェクトバインディング値のデフォルト値:

3. クエリ方法:

完全なコード:

メソッド: {
    取得データ() {
      ステータスを3にします。
      this.queryParams.params={
        ステータス:ステータス、
        パスファクトリー: this.$store.state.user.werksName 
      }
      params = JSON.parse(JSON.stringify(this.queryParams)) とします。
      api.getPageList(params).then((res) => {
        (res.成功)の場合{
          this.dataList = res.data.content;
        } それ以外 {
          トースト.失敗({
            メッセージ:res.msg
          });
        }
      });
    },
     onLoad(){//下部クエリ this.queryParams.page += 1; 
      _this = this とします。
      ステータスを3にします。
      this.queryParams.params={
        ステータス:ステータス、
        パスファクトリー: this.$store.state.user.werksName 
      }
      params = JSON.parse(JSON.stringify(this.queryParams)) とします。
      api.getPageList(params).then((res) => {
       if(res.success){
          this.dataList = this.dataList.concat(res.data.content);
          if (this.dataList.length >= res.data.totalElements) {
            this.finished = true;
          } それ以外 {
            this.finished = false;
          }
          this.loading = false;
        }
      });
    },

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

以下もご興味があるかもしれません:
  • Vue 入力ボックスのファジークエリのサンプルコード
  • VueはInput入力ボックスのファジークエリメソッドを実装します
  • Vue.jsはページングクエリ機能を実装します
  • Vueは時間をクリックして期間クエリを取得する機能を実装します
  • Vue.js でのクエリ操作の詳細な例
  • Vue.js フレームワークを使用して列車チケット検索システムを実装する (ソースコード付き)
  • vue.js をベースにページングクエリ機能を実装する
  • Bootstrap4 + Vue2 を使用してページング クエリを実装するサンプル コード
  • Vue2 フィルター ファジー クエリ メソッド
  • Vueは入力ボックスのファジークエリのサンプルコードを実装します(スロットリング機能の適用シナリオ)

<<:  サーバー上でjupyterノートブックを実行する問題を解決する

>>:  複数のdiv内のテーブルのtdwidth設定は同じで、揃えることができません

推薦する

CSSブレンドモードとSVGを使用して、製品画像の色を動的に変更します。

数日前、Codepen で @Kyle Wetton が書いた、CSS ブレンディング モードと S...

Vueはパーセンテージバー効果を実現します

この記事では、パーセンテージバーを実現するためのVueの具体的なコードを参考までに共有します。具体的...

MySQL の自動増分 ID に関するいくつかの小さな問題の要約

以下の質問はすべて InnoDB ストレージ エンジンに基づいています。 1. 最も大きな ID を...

Vmvare 仮想マシンを使用して Ubuntu のルート ディレクトリをパーティション分割する方法の紹介

目次序文根拠手順1. CDから仮想マシンを起動する2. GPartedツールを使用してパーティション...

JavaScript マクロタスクとマイクロタスク

マクロタスクとマイクロタスクJavaScript はシングルスレッド言語です (マルチスレッドの場合...

MYSQLでリモートアクセス権限を有効にする方法

1. MySQLデータベースにログインするmysql -u ルート -pユーザーテーブルを表示する ...

Linuxの基本コマンドmktempの詳しい説明

mptemp は安全な方法で一時ファイルまたはディレクトリを作成します。このコマンドの適用範囲: R...

ページを更新せずにフォームを送信するには iframe を使用します

そこで、この問題を解決するために埋め込みフレームワークを導入します。具体的な原則は、フォームがデータ...

CSSオーバーフローメカニズムについての簡単な説明

CSS オーバーフローのメカニズムを詳細に学ぶ必要があるのはなぜですか?実際の開発プロセスでは、コン...

HTML+CSS マージテーブル境界線サンプルコード

table タグと td タグに境界線を追加すると、デフォルトでは次のように二重境界線が使用されます...

Dockerを使用してコンテナリソースを制限する方法

覗き見の問題サーバーでは、IIS サービスが複数のサイトを展開していると仮定すると、サイトの 1 つ...

クリーンなコードのための Web デザインの 12 の法則 [グラフィック]

美しいコードは美しい Web サイトの基礎です。優れた CSS は、同様に優れた HTML の上にの...

Docker-compose チュートリアルのインストールとクイックスタート

目次1. Compose の紹介2. ComposeとDockerの互換性3. Dockerをインス...

ホバードロップダウンメニューを実装するためのネイティブJS

JS はホバー ドロップダウン メニューを実装します。これは、フロントエンドの面接で遭遇するシナリ...

CSS に基づいて MaterialUI ボタン​​クリックアニメーションを実装し、それを React コンポーネントにカプセル化します。

序文フロントエンドフレームワークのヘビーユーザーとして、私はテクノロジーを選択する際にそのエコロジー...