ElementUI el-select の過剰なデータに対する解決策についての簡単な説明

<el-選択
  v-model="ユーザーID"
  フィルター可能
  :filter-method="ユーザーフィルター"
  クリア可能>
  <el-オプション
    v-for="userList 内の項目"
    :key="item.userId"
    :label="item.ユーザー名"
    :value="item.userId"
  </el-option>
</el-select>

ユーザーフィルター(クエリ = '') {
  arr = this.allUserList.filter((item) => { とします。
    item.username.includes(クエリ) || item.userId.includes(クエリ) を返します
  })
  （arr.length > 50）の場合{
    this.userList = arr.slice(0, 50)
  } それ以外 {
    this.userList = arr
  }
},
getUserWhiteList() {
  HttpRequest.post("/api/admin/community/getUserWhiteList").then(
    レスポンス => {
      this.allUserList = 応答データリスト;
      this.userFilter()
    }
  );
},

<テンプレート>
    <el-選択
        クラス="yt-select"
        v-model="currValue"
        フィルター可能
        v-bind="$attrs"
        :filter-method="ユーザーフィルター"
        :disabled="無効"
        :clearable="クリア可能"
        @change="変更"
    >
        <el-オプション
            v-for="renderOption 内のオプション"
            :key="オプション.値"
            :value="オプションの値"
            :label="オプション.ラベル"
        >{{ オプション.ラベル }}</el-option>
    </el-select>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
    名前: 'easy-select',
    小道具: {
        価値： {
            タイプ: [文字列、数値],
            デフォルト： ''
        },
        最大: {
            タイプ: 数値、
            デフォルト: 30
        },
        無効：
            タイプ: ブール値、
            デフォルト: false
        },
        クリア可能: {
            タイプ: ブール値、
            デフォルト: true
        },
        オプション:
            タイプ: 配列、
            デフォルト: () => []
        }
    },
    データ （） {
        戻る {
            レンダリングオプション: []
        }
    },
    計算: {
        通貨値: {
            得る （） {
                this.value を返します || ''
            },
            設定(値) {
                this.$emit('入力', 値)
            }
        }
    },
    時計：
        価値 （） {
            this.addValueOptions()
        },
        オプション:
            ハンドラー（V）{
                この.init()
            },
            深い: 本当
        }
    },
    作成された（）{
        この.init()
    },
    メソッド: {
        非同期初期化（）{
            this.userFilter()
            this.addValueOptions()
        },
        値オプションを追加します () {
            if (this.currValue) {
                let target = this.options.find((item) => { // 大きなオプションから現在の項目を検索します return item.value === this.currValue
                })
                if (target) { // 現在のアイテムを小さいオプションと比較し、そうでない場合は追加します if (this.renderOption.every(item => item.value !== target.value)) {
                        this.renderOption.unshift(ターゲット)
                    }
                }
            }
        },
        addFilterOptions (ラベル) {
         // 入力を検索するたびに、完全一致がある場合は、アイテムが renderOption にあることを確認します。let target = this.options.find((item) => { // 大きなオプションから現在のアイテムを検索します。return item.label === label
            })
            if (target) { // 現在のアイテムを小さいオプションと比較し、そうでない場合は追加します if (this.renderOption.every(item => item.label !== target.label)) {
                    this.renderOption.unshift(ターゲット)
                }
            }
        },
        ユーザーフィルター (クエリ = '') {
            arr = this.options.filter((item) => { とします。
                item.label.includes(クエリ) || item.value.includes(クエリ) を返します
            })
            （arr.length＞this.max）の場合{
                this.renderOption = arr.slice(0, this.max)
                this.addFilterOptions(クエリ)
            } それ以外 {
                this.renderOption = arr
            }
        },
        変更（値）{
            this.$emit('change', 値)
            if (!value) { // 単一選択のクリアオプションを初期化します this.userFilter()
            }
        }
    }
}
</スクリプト>