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設定は同じで、揃えることができません

推薦する

ネイティブ JS 音楽プレーヤー

この記事の例では、音楽プレーヤーを実装するためのJSの具体的なコードを参考までに共有しています。具体...

削除、切り捨て、ドロップの違いと選択方法

序文先週、同僚が私に尋ねました。「兄さん、MySQL にバグを見つけました。午後にディスクをクリーン...

プライベートDockerリポジトリであるHarborをインストールするための詳細な手順

Harborのインストールは非常に簡単ですが、Dockerログインで行き詰まってしまいました。このブ...

CUDA8.0とCUDA9.0はUbuntu16.04で共存します

序文Github にある以前のコードには、CUDA 8.0 環境が必要なものもあります。初心者の場合...

Dockerでのpython3.8イメージのインストールについて

Docker Hub公式サイト1. Pythonミラーを検索するdocker 検索 python 2...

Redux Toolkit で Redux を簡素化する方法

目次Redux Toolkitが解決する問題何が含まれていますか? Redux Toolkit AP...

いくつかの重要なMySQL変数

MySQL 変数は数多くありますが、その中には注目に値するものもあります。ここでは、参考までに、注目...

フォアマン Ubuntu16 クイックインストール

クイックスタートガイドForeman インストーラーは、完全に機能する Foreman セットアップ...

自動ロック画面機能を実現するjs

1. 使用シナリオこのような要件があるため、システムが開発されました。ユーザーがデスクトップを離れ...

Vue+echart で 2 列チャートを実現

この記事では、vue+echart を使って二重列チャートを実現するための具体的なコードを参考までに...

MySQL の時間差関数 TIMESTAMPDIFF と DATEDIFF の使用

時間差関数 TIMESTAMPDIFF と DATEDIFF の使用SQL ステートメント、特にスト...

Vue3 でサードパーティのコンポーネントライブラリをオンデマンドでロードする方法

序文Element Plus を例に、コンポーネントとスタイルのオンデマンド読み込みを構成します。環...

Ubuntu 20.04 CUDA & cuDNN のインストール方法 (グラフィカル チュートリアル)

CUDA インストール cuda をダウンロードサポートされているcudaバージョンを表示するには...

Linux でファイルを削除するときに「操作は許可されていません」というプロンプトが表示される場合の対処方法

同僚からよく聞かれるのですが、ファイル/ディレクトリを削除すると「操作は許可されていません」というエ...

JS における ES6 継承と ES5 継承の違い

目次継承ES5 プロトタイプ継承ES6 クラス継承両者の違いES5プロトタイプ継承の内部実装ES6 ...