element-plus(vue3)表單el-select下拉框的遠程分頁下拉觸底關鍵字搜索實現

一、基礎內核-自定義指令

1.背景

2.定義

3.使用

4.注意

當編輯時需要回顯,此時由于分頁導致可能匹配不到對應label文本顯示,此時可以這樣解決

二、升級使用-二次封裝組件

三、核心代碼

1.自定義指令

定義

----------------selectLoadMoreDirective.ts--------------------import { Directive, DirectiveBinding, nextTick } from "vue";
import { debounce } from "../utils/index";const loadMore: Directive = {beforeMount(el: any, binding: DirectiveBinding) {// 查詢下拉框的滾動容器const popperClassName = el.getAttribute("popper-class-name");let selectDom = document.querySelector(`.${popperClassName} .el-select-dropdown__wrap`);function loadMores(this: any) {// 判斷是否滾動到底部const isBase =this.scrollHeight - this.scrollTop - 1 <= this.clientHeight;if (isBase) {binding.value && binding.value(); // 觸發綁定的回調函數}}// 使用防抖處理滾動事件const debouncedLoadMore = debounce(loadMores, 300); // 設置防抖時間為300msel.selectDomInfo = selectDom;el.userLoadMore = debouncedLoadMore; // 將防抖后的函數賦值給 el.userLoadMorenextTick(() => {selectDom?.addEventListener("scroll", debouncedLoadMore);});},beforeUnmount(el: any) {if (el.userLoadMore) {el.selectDomInfo?.removeEventListener("scroll", el.userLoadMore);delete el.selectDomInfo;delete el.userLoadMore;}},
};export default loadMore;

全局注冊?

------------------main.ts-----------------
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import loadMore from '@/directive/selectLoadMoreDirective'const app = createApp(App)app.use(ElementPlus)
app.use(router)
app.directive('loadMore', loadMore)
app.mount('#app')

2.二次封裝組件代碼

定義

-------------------------CustomSelect.vue---------------------------<template><el-selectv-model="selectedValue"v-loadMore="loadMore":popper-class="popperClassName":popper-class-name="popperClassName":remote-method="remoteMethod":loading="loading":placeholder="placeholder":style="style"filterableremote><el-optionv-for="item in options":key="item.value":label="item.label":value="item"/></el-select>
</template><script setup lang="ts">
import { ref, watch } from "vue";// 定義 props
const props = defineProps({// 雙向綁定值modelValue: {type: [Object, String, Number],default: null,required: true},placeholder: {type: String,default: "請選擇",},popperClassName: {type: String,default: "",required: true},remoteMethod: {type: Function,required: true},loading: {type: Boolean,default: false,},style: {type: Object,default: () => ({}),},loadMore: {type: Function,required: true,},options: {type: Array<{ value: number; label: string }>,default: () => [],required: true},
});// 加載狀態
const loading = ref(false);// 定義 emits
const emit = defineEmits(["update:modelValue"]);// 雙向綁定值
const selectedValue = ref(props.modelValue);// 監聽 modelValue 的變化
watch(() => props.modelValue,(newVal) => {selectedValue.value = newVal;}
);// 監聽 selectedValue 的變化并觸發更新
watch(selectedValue, (newVal) => {emit("update:modelValue", newVal);
});
</script><style scoped>
/* 自定義樣式 */
</style>

使用

----------------------xxx.vue------------------------------<template><CustomSelectv-model="selectedGrade"placeholder="選擇年級"popper-class-name="grade_select2":remote-method="searchGrades":style="{ width: '100px', marginRight: '10px' }":load-more="() => loadMore('grade')":options="grades"/>
</template>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/81004.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/81004.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/81004.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

大內存生產環境tomcat-jvm配置實踐

話不多講&#xff0c;奉上代碼&#xff0c;分享經驗&#xff0c;交流提高&#xff01; 64G物理內存,8核CPU生產環境tomcat-jvm配置如下&#xff1a; JAVA_OPTS-server -XX:MaxMetaspaceSize4G -XX:ReservedCodeCacheSize2G -XX:UseG1GC -Xms48G -Xmx48G -XX:MaxGCPauseMilli…

C++函數模板基礎

1 函數模板 1.1 基礎介紹 函數模板是一種特殊的函數定義,它允許你創建通用的函數,這些函數可以處理多種不同的數據類型,而不需要為每種數據類型都編寫一個單獨的函數。 在 C++ 里,函數模板的格式包含模板聲明與函數定義兩部分,其基本格式如下: template <typename…

mangodb的數據庫與集合命令,文檔命令

MongoDB的下載安裝與啟動&#xff0c; 一、MongoDB下載安裝 1. 官網下載 打開官網&#xff1a;https://www.mongodb.com/try/download/community選擇&#xff1a; 版本&#xff08;Version&#xff09;&#xff1a;選最新版或者根據需要選舊版。平臺&#xff08;OS&#xff0…

flink端到端數據一致性

這里有一個注意點&#xff0c;就是flink端的精準一次 1.barrier對齊精準和一次非對齊精準一次 對比?? ??維度????Barrier 對齊的精準一次????Barrier 非對齊的精準一次????觸發條件??需等待所有輸入流的 Barrier 對齊后才能觸發檢查點 收到第一個 Barrier …

4月29號

級別越大,字體越小. CSS樣式控制: 例如把日期設為灰色字體

PHP代碼-服務器下載文件頁面編寫

內部環境的服務資源下載頁面有訪問需求&#xff0c;給開發和產品人員編寫一個簡潔的下載頁面提供資源下載。直接用nginxphp的形式去編寫了&#xff0c;這里提供展示index.php文件代碼如下&#xff1a; <?php // 配置常量 define(BASE_DIR, __DIR__); // 當前腳本所在目錄作…

MySQL基礎關鍵_001_認識

目 錄 一、概述 1.數據庫&#xff08;DB&#xff09;分類 &#xff08;1&#xff09;關系型數據庫 &#xff08;2&#xff09;非關系型數據庫 2.數據庫管理系統&#xff08;DBMS&#xff09; 3.SQL &#xff08;1&#xff09;說明 &#xff08;2&#xff09;分類 二、…

Shell、Bash 執行方式及./ 執行對比詳解

Shell、Bash 執行方式及./ 執行對比詳解 在 Linux 和 UNIX 系統的使用過程中&#xff0c;Shell 腳本是實現自動化任務、系統管理的重要工具。而在執行 Shell 腳本時&#xff0c;我們常常會用到bash命令以及./的執行方式&#xff0c;這兩種執行方式看似相似&#xff0c;實則存在…

P1494 [國家集訓隊] 小 Z 的襪子 Solution

Description 給定序列 a ( a 1 , a 2 , ? , a n ) a(a_1,a_2,\cdots,a_n) a(a1?,a2?,?,an?)&#xff0c;有 q q q 次查詢&#xff0c;每次查詢給定 ( l , r ) (l,r) (l,r). 你需要求出 2 ∑ i ≤ i < j ≤ r [ a i a j ] ( r ? l ) ( r ? l 1 ) \dfrac{2\sum…

解決vue3 路由query傳參刷新后數據丟失的問題

前言&#xff1a;在頁面刷新的時候&#xff0c;路由query數據會被清空&#xff0c;網上很多方法說query傳參可以實現&#xff0c;反正我是沒有實現 思路&#xff1a;將數據保存到本地&#xff0c;通過 “ &#xff1f;” 進行判斷是否有數據&#xff0c;頁面銷毀的時候刪除本地…

IIC小記

SCL 時鐘同步線&#xff0c;由主機發出。 當SCL為高電平&#xff08;邏輯1&#xff09;時是工作狀態&#xff0c;低電平&#xff08;邏輯0&#xff09;時是休息狀態。SCL可以控制通信的速度。 SDA 數據收發線 應答位&#xff1a;前八個工作區間是一個字節&#xff0c;在SCL…

Linux[開發工具]

vim(多模式編輯器) vim是一個多模式的編譯器!!命令模式是核心 vim 文件名 (數字)(進入編輯,光標處在第幾行) esc切換模式 shift; >:(:wq保存并退出) 命令模式: 鍵盤的輸入,默認被當做命令來看待 gg:光標快速定位到最開始 shiftgG:股那個表快速定位到最結尾 nshiftgG:光標…

hutools工具類中isNotEmpty與isNotBlank區分

基于以下兩種情況。在判斷的變量是String類型時&#xff0c; 判斷是否為空&#xff0c;推薦使用isNotBlank(). 1. isNotEmpty 不會驗證str中是否含有空字符串&#xff0c;而 isNotBlank方法會驗證 public static boolean isNotEmpty(CharSequence str) {return false isEmpty…

算法相關概念

1 算法概述 1.1 算法概念 算法是特定問題求解步驟的描述&#xff0c;也是獨立存在的一種解決問題的思想和方法 對于算法而言&#xff0c;實現他的編程語言無關緊要&#xff0c;重要的是思想和方法&#xff01;&#xff01;&#xff01; 公式&#xff1a;程序算法數據結構&a…

數據庫基礎與核心操作:從概念到實戰的全面解析

目錄 1 基本概念2 基本操作2.1 DCL2.2 DDL2.3 DML2.4 DQL(高級查詢) 3 高級功能3.1 視圖&#xff08;無參函數&#xff09;3.2 存儲過程(有參函數)3.3 觸發器 4 約束4.1 主鍵約束4.2 UNIQUE KEY&#xff08;唯一鍵約束&#xff09;4.3 FOREIGN KEY&#xff08;外鍵約束&#xf…

打造驚艷的漸變色下劃線動畫:CSS實現詳解

引言&#xff1a;為什么需要動態下劃線效果&#xff1f; 在現代網頁設計中&#xff0c;微妙的交互效果可以顯著提升用戶體驗。動態下劃線特效作為一種常見的視覺反饋方式&#xff0c;不僅能夠引導用戶注意力&#xff0c;還能為頁面增添活力。本文將深入解析如何使用純CSS實現一…

【11408學習記錄】考研英語語法核心:倒裝句考點全解+真題演練

倒裝句 英語語法總結——特殊句式倒裝全部倒裝介詞短語形容詞副詞There be 部分倒裝否定副詞或詞組位于句首only位于句首虛擬條件句省略if 每日一句詞匯第一步&#xff1a;找謂語第二步&#xff1a;斷句第三步&#xff1a;簡化主句定語從句 英語 語法總結——特殊句式 倒裝 …

upload-labs PASS 1-5通關

PASS-01 前端javascript檢查 1&#xff0c;第一個提示javascript對上傳的文件進行審查 2&#xff0c;javascript工作在前端頁面&#xff0c;可以直接刪除具有審查功能的代碼 3&#xff0c;刪除之后再上傳一句話木馬 上傳成功&#xff0c;可以使用蟻劍進行連接&#xff0c;控制網…

GoogleTest:在Ubuntu22.04安裝

1.首先克隆GoogleTest $ mkdir gtest $ cd gtest $ git clone git@github.com:google/googletest.git 克隆后的文件目錄結構為 gtest/googletest$ tree -L 1 ├── build ├── BUILD.bazel ├── ci ├── CMakeLists.txt ├── CONTRIBUTING.md ├── CONTRIBUTORS ├─…

Transformer-LSTM-SVM回歸

題目&#xff1a;Transformer-LSTM-SVM回歸 文章目錄 題目&#xff1a;Transformer-LSTM-SVM回歸前言一&#xff1a;Transformer1. Transformer的原理1.1 Transformer的核心結構1.2 注意力機制1.4 位置編碼1.5 損失函數 2. 完整案例 LSTMSVM 前言一&#xff1a;Transformer 1.…