el-select 組件 懶加載 可遠程搜索

用于分頁數據的懶加載 vue+elment
新建elSelct.vue 組件

<template><div><el-select v-el-select-loadmore="loadMore" :value="defaultValue" :loading="loading" :multiple="multiple":placeholder="placeholder" :allow-create="allowCreate" filterable remote clearable:remote-method="(query) => {remoteMethod(query, value)}" style="width: 100%;" @change="change"@input="$emit('input',$event)" @visible-change="visibleChange" @clear="clearChange"><el-option v-if="hasAll" :label="defaultLabel" value="" /><el-option v-for="(item,index) in optionsList" :key="item.index+'s'+item.id":label="concatString2(item[label], item[labelTwo])" :value="item[valueString]">{{ concatString(item[label], item[labelTwo]) }}</el-option></el-select></div>
</template><script>export default {name: 'YSelect',directives: {'el-select-loadmore': {bind(el, binding) {// 獲取element-ui定義好的scroll盒子const DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')DOM.addEventListener('scroll', function() {/*** scrollHeight 獲取元素內容高度(只讀)* scrollTop 獲取或者設置元素的偏移值,常用于, 計算滾動條的位置, 當一個元素的容器沒有產生垂直方向的滾動條, 那它的scrollTop的值默認為0.* clientHeight 讀取元素的可見高度(只讀)* 如果元素滾動到底, 下面等式返回true, 沒有則返回false:* ele.scrollHeight - ele.scrollTop === ele.clientHeight;*/const condition = this.scrollHeight - this.scrollTop <= this.clientHeightif (condition) {binding.value()}})}}},props: {// 是否允許創建條目allowCreate: {type: Boolean,default: false},// 需要顯示的名稱label: {type: String,default: ''},// 需要顯示的名稱labelTwo: {type: String,default: ''},// 傳入的數據,必填value: {type: [String, Number, Array],default: null},// 是否拼接label | valueisConcat: {type: Boolean,default: false},isConcatShowText: {type: Boolean,default: false},// 拼接label、value符號concatSymbol: {type: String,default: ' | '},valueString: {type: String,default: ''},// 選項數據,必填options: {type: Array,default: () => {return []}},// 是否有全部選項hasAll: {type: Boolean,default: true},defaultLabel: {type: String,default: '全部'},// 加載loadingloading: {type: Boolean,default: false},// 提示placeholder: {type: String,default: '請選擇'},// 是否支持多選multiple: {type: Boolean,default: false},// 每次顯示數量size: {type: Number,default: 100}},data() {return {page: 1,pageRemote: 1,defaultLoading: false,timer: null,optionsList: [],oldOptions: [],isRemote: false,defaultValue:null,}},watch: {options: {handler(val) {if (this.isRemote) {if (val) {this.optionsList = valthis.oldOptions = this.oldOptions.filter((item) => {return !val.some(valItem => item.id === valItem.id)})this.oldOptions = [...this.oldOptions, ...val]}} else {if (val) {this.optionsList = this.optionsList.filter((item) => {return !val.some(valItem => item.id === valItem.id)})this.optionsList = [...this.optionsList, ...val]}}},deep: true},value: {handler(val, oldVal) {this.defaultValue = this.valueif (val==='null' || val===null || val==='undefined' || val===undefined || val===''){this.clearChange()}},immediate: false,deep: true}},mounted() {this.defaultValue = this.valuethis.optionsList = this.options},methods: {//選擇后 只顯示label//張三concatString(a, b) {a = a || ''b = b || ''if (this.isConcat) {// return a + ((a && b) ? ' | ' : '') + breturn a + ((a && b) ? this.concatSymbol : '') + b}return a},//選擇下拉展示時 可以展示label和labelTwo//123||張三concatString2(a, b) {a = a || ''b = b || ''if (this.isConcat) {// return a + ((a && b) ? ' | ' : '') + bif (this.isConcatShowText == true) {return a + ((a && b) ? this.concatSymbol : '') + b} else {return a}}return a},change(val) {console.log('change', val)this.$emit('change', val)},visibleChange(status) {console.log('change2', status)if (!status) {if (this.isRemote) {this.isRemote = falsethis.optionsList = [...this.oldOptions]}}this.$emit('visibleChange', status)},loadMore() {console.log(this.isRemote, this.pageRemote, this.page)if (this.isRemote) {if (this.pageRemote === 1) {this.$emit('loadMore', this.pageRemote)this.pageRemote++} else {this.pageRemote++this.$emit('loadMore', this.pageRemote)}} else {this.page++this.$emit('loadMore', this.page)}},remoteMethod(query) {this.pageRemote = 1if (this.timer) {clearTimeout(this.timer)this.timer = null}this.timer = setTimeout(() => {this.isRemote = truethis.oldOptions = [...this.optionsList]this.optionsList = []this.$emit('remoteMethod', query, this.pageRemote)}, 500)},//清除clearChange() {if (typeof this.defaultValue === 'string') {this.defaultValue = ''} else if (this.isMultiple) {this.defaultValue = []}this.$emit('clear')}}}
</script><style lang='scss' scoped></style>

然后再頁面引用
hasAll 是否顯示全部2個字 is-concat 是否拼接 concat-symbol拼接符號 is-multiple是否多選 label 字段名稱1 labelTwo 字段名稱2 valueString要獲取的value值,是id還是projectCode options顯示的數據 @loadMore加載更多 的方法 @remoteMethod遠程請求的方法 @change方法
[{name:'我是名稱’,projectCode:‘0121’,id:1}]

<template><YSelect  v-model="form.contractNumber" :hasAll='false' :is-concat="true" :is-multiple="false":isConcatShowText="false" :concat-symbol="' || '" label="name" labelTwo="projectCode"  valueString="id" :options="contractList" :placeholder="'請選擇合同編號'"  @loadMore="loadMore" @remoteMethod="remoteMethod" @change="selectContract" @clear='contractClear()'/>
</template>import YSelect from '@/views/components/elSelect/index'
export default {
components: {YSelect},
data:{return(){projectPageNum:0}
},
mounted() {
this.projectSearch()
},
methods: {
//清除
contractClear(){},
//下拉框選中完成后visibleChange(status) {},//下拉框改變時selectChange(){},//項目號 懶加載 下拉加載更多loadMore(page) {let that=thisthat.projectPageNum =pagethis.projectSearch('',true)},//項目號 下拉框的遠程搜索remoteMethod(query, page) {this.projectPageNum = pagethis.projectSearch(query,false)},/**項目號搜索 列表展示*/projectSearch(val, lazy = false) {let that = thisif (lazy == false) { // 如果不是懶加載,this.projectList = [] // 把select選項數組重置為空that.projectPageNum = 1 // 設置查詢第一頁,每頁20條}//請求后臺數據listInfo({search: val,pageSize: 30,pageNum: that.projectPageNum}).then(response => {that.projectList=response.rows});},
}
}

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

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

相關文章

LeetCode算法心得——使用最小花費爬樓梯(記憶化搜索+dp)

大家好&#xff0c;我是晴天學長&#xff0c;很重要的思想動規思想&#xff0c;需要的小伙伴可以關注支持一下哦&#xff01;后續會繼續更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1&#xff09;使用最小花費爬樓梯 給你一個整數數組 cost &#xff0c;其中 cost[i] 是從…

PTA-使用函數求最大公約數

本題要求實現一個計算兩個數的最大公約數的簡單函數。 函數接口定義&#xff1a; int gcd( int x, int y ); 其中x和y是兩個正整數&#xff0c;函數gcd應返回這兩個數的最大公約數。 裁判測試程序樣例&#xff1a; #include <stdio.h> int gcd( int x, int y ); i…

【數據結構】深入淺出理解鏈表中二級指針的應用

&#x1f984;個人主頁:修修修也 &#x1f38f;所屬專欄:數據結構 ??操作環境:Visual Studio 2022 (注:為方便演示本篇使用的x86系統,因此指針的大小為4個字節) 目錄 &#x1f4cc;形參的改變不影響實參! 1.調用函數更改整型時傳值調用與傳址調用的區別 &#x1f38f;傳值…

render函數舉例

在這段代碼中&#xff0c;renderButton是一個對象嗎 還有render為什么不能寫成render() {} 代碼原文鏈接 <template><div><renderButton /></div> </template><script setup> import { h, ref } from "vue"; const renderButt…

C#,簡單修改Visual Studio 2022設置以支持C#最新版本的編譯器,尊享編程之趣

1 PLS README & CHAPTER 5 用一個超簡單的例子說明各版本 C# 的差異。 使用新版本&#xff08;比如C#.11&#xff09;&#xff0c;當然有一定的好處。我們在寫程序的時候一般這樣&#xff1a; Visual Studio 2022 默認只能這樣寫&#xff1a; string imageFile Path.C…

若依框架參數驗證

文章目錄 一、前端觸發參數校驗異常1.前端頁面2.前端代碼 二、后端觸發參數校驗異常1.前端頁面2.后端報錯 三、后端自定義參數驗證1.添加注解2.觸發后端校驗 一、前端觸發參數校驗異常 1.前端頁面 輸入不符合校驗規則的值來觸發 2.前端代碼 校驗規則數組 表單的元素 修…

SQL Server數據庫備份與還原

目錄 SQL Server DataBase備份 SQL Server DataBase還原 SQL Server DataBase備份 在 SQL Server 中&#xff0c;你可以使用 SQL Server Management Studio (SSMS) 或 Transact-SQL 語句來手動備份數據庫。以下是兩種方法&#xff1a; 使用 SQL Server Management Studio (SS…

JAVA小游戲“飛翔的小鳥”

第一步是創建項目 項目名自擬 第二步創建個包名 來規范class 再創建一個包 來存儲照片 如下&#xff1a; 代碼如下&#xff1a; package game; import java.awt.*; import javax.swing.*; import javax.imageio.ImageIO;public class Bird {Image image;int x,y;int width…

Windows下安裝Anaconda3并使用JupyterNoteBook

下載安裝包 Anaconda官網 進官網&#xff0c;點擊下載 自動根據當前系統下載對應的包了&#xff0c;安裝包大約1G&#xff0c;喝杯Java耐心等待。 安裝 很多人安裝C盤&#xff0c;我這里放D盤。 注意&#xff1a;你的文件夾目錄一定要不能有空格 然后其他的直接默認install即…

不同路徑 遞歸

int dfs(int i, int j, int m, int n) { if (i > m || j > n) return 0; // 越界了 if (i m && j n) return 1; // 找到一種方法&#xff0c;相當于找到了葉子節點 return dfs(i 1, j, m, n) dfs(i, j 1, m, n); } int u…

在線視頻課程教育系統源碼/網課網校/知識付費/在線教育系統/在線課程培訓系統源碼

源碼簡介&#xff1a; 在線視頻課程教育系統源碼&#xff0c;作為網課/網校/知識付費/在線教育系統&#xff0c;它有文章付費閱讀在線點播自動發貨付費閱讀VIP會員系統等功能。它是實用的在線課程培訓系統源碼。 發貨100-在線視頻課程教育系統&#xff0c;它是一款功能實用的…

優思學院|2024年質量管理的大趨勢

2023年我們已經順利度過了整年的大部分時間&#xff0c;2024年質量管理的趨勢和問題在全球范圍內都已經引起了關注&#xff0c;或者仍然是企業導航的首要任務。 1. 通貨膨脹與質量管理 2023年&#xff0c;全球范圍內通貨膨脹和嚴峻的經濟狀況成為企業最關心的問題之一。盡管物…

Flash可更換聲音語音芯片WT588F02系列:優勢盡顯,應用廣泛

在語音技術日益普及的今天&#xff0c;唯創知音推出的Flash可更換聲音語音芯片WT588F02系列備受關注。該系列芯片憑借其強大的性能與廣泛的應用領域&#xff0c;成為市場上的一顆璀璨明星。本文將分析WT588F02系列的優勢&#xff0c;并探討其應用場景&#xff0c;以展現其在語音…

typedef 的使用

typedef 的定義 typedef 是 C 和 C 中的一個關鍵字&#xff0c;用于給已有類型定義一個新的名字&#xff0c;與 class、struct、union 和 enum 聲明不同&#xff0c;typedef 聲明不引入新類型&#xff1b;它們引入現有類型的新名稱 typedef 的語法格式 typedef existing_typ…

gitlab 12升級14(解決各種報錯問題)

1.這里是從自己公司的源下載的rpm包&#xff0c;需要換成自己的 2.從12的最后一個版本升級到14的最后一個版本 # 停服務 [rootdocker test]# gitlab-ctl stop puma && gitlab-ctl stop sidekiq && gitlab-ctl stop nginx && gitlab-ctl status# 進入…

前端如何判空

這樣判空就會報錯 loadNode(node, resolve)console.log("node")console.log(node)if (node.data ! null) {this.get(ctx /publicity/publicityType/typeTreeData?id node.data.id).then((res) > {resolve(res)})}}, 需要這樣寫&#xff0c;用typeof來做類型判…

【webrtc】ModuleRtpRtcpImpl2: RtpRtcp DEPRECATED_Create 廢棄了

基于m98 代碼。Deprecate the static RtpRtcp::Create() method. 提交記錄RtpRtcp::Create factory method 工廠方法廢棄了。std::unique_ptr<RtpRtcp> RtpRtcp::DEPRECATED_Create(const Configuration& configuration) {RTC_DCHECK

java 實現發送郵箱,復制即用,包含郵箱設置第三方登錄授權碼獲取方法

application.yml spring:profiles:active: dev # active: test#郵件附件上傳文件大小限制servlet:multipart:max-file-size: 50MB #單個文件大小限制max-request-size: 100MB #總文件大小限制&#xff08;允許存儲文件的文件夾大小&#xff09;mail:default-encoding: UTF…

【開題報告】基于SpringBoot的機車模型交流平臺的設計與實現

1.研究背景 機車模型是一種受到廣泛關注的模型制作愛好&#xff0c;它涵蓋了機車模型的收藏、展示、制作等多個方面。然而&#xff0c;由于機車模型愛好者的數量較少&#xff0c;且分散在不同的地區和社區&#xff0c;導致他們難以進行互動和資源共享。因此&#xff0c;需要一…

COBOL排序問題

*SORT排序文件文件超長&#xff0c;將主鍵保存在臨時文件里&#xff0c;超長的數據從數組里面去檢索獲取。 IDENTIFICATION DIVISION. PROGRAM-ID. TEST002. * ENVIRONMENT DIVISION. CONFIGURATION SECTION. …