el-select滚动获取下拉数据;el-select滚动加载
el-select下拉获取数据
- 1.解决问题
- 2.封装MyScrollSelect组件
- 3.使用MyScrollSelect组件
1.解决问题
场景:下拉数据量过大,后端提供一个分页查询接口;需要每次滚动加载下一页的下拉数据
且单选的状态,需要支持回显,通过name名称查询回显;–本文已包含
如果是多选回显,可以让后端提供一个根据idList能反向找到对应id的下拉集合的接口;–可自己试试
2.封装MyScrollSelect组件
<template><div>list长度:{{ list.length }}</div><div>$attrs:{{ $attrs }}</div><el-select @change="changeVal" v-bind="$attrs" :remote-method="remoteMethod" style="width: 100%"><div v-infinite-scroll="loadMore" style="overflow: hidden"><el-option v-for="item in list" :key="item[valueKey]" :label="item[labelKey]" :value="item[valueKey]" /><!-- 下拉底部加载提示 --><div v-if="loading" class="loading-text">加载中...</div></div></el-select>
</template><script setup >
import { ref, watch, onMounted } from "vue"
import { debounce } from "lodash"const emit = defineEmits(['update:searchName']);const props = defineProps({// v-model绑定值不为空时传递初始数据列表initialOptions: {type: Array,default: () => []},// 传入对应的列表加载apimethods: {type: Function,required: true // 或者 true,取决于它是否必须被传递},// 传入查询关键字searchKey: {type: String,default: ""},// 所选key对用namesearchName: {type: String,default: undefined},labelKey: {type: String,default: "name"},valueKey: {type: String,default: "id"},// 查询的其他参数queryData: {type: Object,default: () => { }},
})const isMounted = ref(false)
const loading = ref(false)const list = ref([]) // 选项列表
const queryFrom = ref({pageNum: 1,totalPage: 1,pageSize: 20
})// 自定义远程搜索方法
const remoteMethod = (query) => {queryFrom.value.pageNum = 1list.value = []queryFrom.value[props.searchKey] = queryqueryFrom.value = { ...queryFrom.value, ...props.queryData }getList()
}// 调用props.methods获取下拉数据
const getList = () => {loading.value = trueprops.methods(queryFrom.value).then(res => {console.log('%c【' + 'res' + '】打印', 'color:#fff;background:#0f0', res)list.value = [...list.value, ...res.records]queryFrom.value.totalPage = Math.ceil(res.total / 20) // 计算总页数 不是总数}).finally(() => {loading.value = false})
}// 无限滚动触底加载
const loadMore = debounce(() => {if (queryFrom.value.pageNum >= queryFrom.value.totalPage || loading.value) returnqueryFrom.value.pageNum++getList()
}, 200)// 根据id回显name
const changeVal = (e) => {list.value.forEach(ele => {if (ele[props.valueKey] === e) {emit('update:searchName', ele[props.labelKey])}})
}// 监听 initialOptions 的变化,用于加载初始值
watch(() => props.initialOptions,newVal => {// 如果 modelValue 中的值还未加载到选项中,加载这些数据if (newVal && newVal.length > 0) {list.value.push(...props.initialOptions)}},{ immediate: true }
)onMounted(() => {isMounted.value = true// 获取初始数据if (props.searchName) {remoteMethod(props.searchName) // 根据name回显} else {getList()}
})
</script>
<style scoped>
.loading-text {padding: 5px;text-align: center;color: #999;font-size: 12px;
}
</style>
3.使用MyScrollSelect组件
<template><div class="page-view wbg pall"><pre>{{ form }}</pre><div style="margin-top: 50px">多选:只能存id</div><MyScrollSelectv-if="isMounted"ref="reviewStageRef"v-model="form.idList1":placeholder="'滚动加载或搜索-单选'"clearablefilterableremotecollapse-tagscollapse-tags-tooltipmultiple:initialOptions="initialOptions":methods="getDeviceNameListApi"searchKey="terminalDeviceName"valueKey="id"labelKey="terminalDeviceName"/><div style="margin-top: 50px">单选:可存id和name 根据name可回显</div><MyScrollSelectv-if="isMounted"ref="reviewStageRef"v-model="form.terminalDeviceId"v-model:searchName="form.terminalDeviceName":placeholder="'滚动加载或搜索-单选'"clearablefilterableremote:initialOptions="initialOptions":methods="getDeviceNameListApi"searchKey="terminalDeviceName"valueKey="id"labelKey="terminalDeviceName"/></div>
</template><script setup>
import { onMounted, ref } from 'vue'
import { getDeviceNameListApi } from "@/api/ipManagement.js" // 后端获取下拉分页接口defineOptions({name: 'FactorySiteAddressLedger'
})const isMounted = ref(false)
const form = ref({idList1: [], // 多选参数terminalDeviceId: '710241160000004443', // 单选参数terminalDeviceName: '益海电厂网监工作站',
})const reviewStageRef = ref(null)const initialOptions = ref([]) // 初始下拉数据onMounted(() => {isMounted.value = true
})
</script>
<style lang="scss" scoped></style>
相关文章:
el-select滚动获取下拉数据;el-select滚动加载
el-select下拉获取数据 1.解决问题2.封装MyScrollSelect组件3.使用MyScrollSelect组件 1.解决问题 场景:下拉数据量过大,后端提供一个分页查询接口;需要每次滚动加载下一页的下拉数据 且单选的状态,需要支持回显,通过n…...
HTTP GET 请求示例
鸿蒙操作系统(HarmonyOS)是华为公司自主研发的面向全场景的分布式操作系统,旨在为用户提供一个安全、流畅且跨设备无缝连接的体验。它支持多种终端设备,如智能手机、平板电脑、智能电视、汽车等,并实现了模块化解耦&am…...
简单理解Oracle中的latch
可以用一个小卖部抢购的例子来理解 Oracle 数据库中的 Latch: 1、 什么是 Latch? 打个比方,假设数据库的某个内存区域(比如缓存的数据块)是小卖部货架上的最后一包辣条,Latch 就像是货架前的一个狭窄通道&a…...
ubuntu新系统使用指南
1. 更新源 2. 配置rime 输入法 sudo apt install ibus-rimeibus-setup #打开配置界面添加雾凇拼音 cd ~/Documents/Tool/input_source/plumgit clone --depth 1 https://github.com/rime/plum plum #没有梯子就劝退cd plum/bash rime-install iDvel/rime-ice:others/recipe…...
sage-huga改进SITAN
Sage-Husa自适应滤波算法 Sage-Husa自适应滤波算法是一种在递推滤波过程中实时估计和修正系统噪声和观测噪声统计特性的算法,从而降低系统模型误差,提高滤波精度。该算法基于卡尔曼滤波,并通过自适应调整噪声协方差矩阵来优化滤波效果。 算法原理 Sage-Husa滤波器的核心思…...
DeepSeek开源周Day1:FlashMLA引爆AI推理性能革命!
项目地址:GitHub - deepseek-ai/FlashMLA 开源日历:2025-02-24起 每日9AM(北京时间)更新,持续五天! 一、开源周震撼启幕 继上周预告后,DeepSeek于北京时间今晨9点准时开源「FlashMLA」,打响开源周五连…...
Git add --- error: Filename too long
0 Preface/Foreword 1 解决办法 git config --system core.longpaths true...
Python入门12:面向对象的三大特征与高级特性详解
面向对象编程(OOP)是Python编程中非常重要的一部分,它通过封装、继承和多态这三大特征,帮助我们更好地组织和管理代码。除此之外,Python还提供了一些其他特性,如类属性、类方法和静态方法,进一步…...
动态链接器(九):.init和.init_array
ELF文件中的.init和.init_array段是程序初始化阶段的重要组成部分,用于在main函数执行前完成必要的初始化操作。 1 .init段和.init_array 段 1.1 作用 .init段包含编译器生成的初始化代码,通常由运行时环境(如C标准库的启动例程࿰…...
Elasticsearch:使用经过训练的 ML 模型理解稀疏向量嵌入
作者:来自 Elastic Dai Sugimori 了解稀疏向量嵌入,理解它们的作用/含义,以及如何使用它们实现语义搜索。 Elasticsearch 提供语义搜索功能,允许用户使用自然语言进行查询并检索相关信息。为此,目标文档和查询必须首先…...
安宝特方案 | 电力行业的“智能之眼”,AR重新定义高效运维!
引言: 电力行业正经历智能化变革,安宝特AR数字化工作流以四大核心优势,为电力企业打造全场景智慧运维方案! 四大颠覆性功能,直击行业痛点 1、高度自定义作业流程 支持图文指引、语音播报、AI实时识别(如…...
【落羽的落羽 数据结构篇】树、二叉树
文章目录 一、树1. 树的概念和结构2. 树的相关术语 二、二叉树1. 概念与结构2. 满二叉树3. 完全二叉树4. 二叉树的性质5. 二叉树的存储结构 一、树 1. 树的概念和结构 之前我们学习了线性表,今天我们再来接触一种全新的数据结构——树。 树是一种非线性的数据结构…...
[回顾]从原型链视角解读Vue底层实现Vue VueCompoent VM VC关系
从原型链视角解读VueComponent与Vue关系 原型链 根据,原型链涉及三个关键属性:__proto__是所有对象的私有属性,指向原型链的第一个元素;prototype是函数的属性,实例对象不拥有它;constructor指向构造函数。提到原型链是JS中实现继承的机制,通过属性链式查找属性,直到…...
springcloud nacos 整合seata解决分布式事务
文章目录 nacos安装Mysql5.7安装及表初始化seata server安装下载并解压seata安装包在conf文件夹修改file.conf文件向本地数据库导入seata需要的表修改registry.conf文件将seata配置信息添加到nacos配置中心启动seata server springcloud整合seata测试流程正常下单流程扣减库存失…...
【算法系列】快速排序详解
文章目录 快速排序的多种实现方式1. 基本快速排序(Lomuto 分区方案)1.1 基本原理1.2 步骤1.3 Java 实现示例 2. Hoare 分区方案2.1 基本原理2.2 步骤2.3 Java 实现示例 3. 三数取中法3.1 基本原理3.2 步骤3.3 Java 实现示例 4. 尾递归优化4.1 基本原理4.…...
神经网络发展简史:从感知机到通用智能的进化之路
引言 神经网络作为人工智能的核心技术,其发展历程堪称一场人类对生物大脑的致敬与超越。本文将用"模型进化"的视角,梳理神经网络发展的五大关键阶段,结合具象化比喻和经典案例,为读者呈现一幅清晰的AI算法发展图谱。 一…...
C语言番外篇(4)--------->goto语句
在C语言中,有一个很特殊的语法,这就是goto语句。goto用于实现同一函数的跳转,goto后面会有一个标志,执行goto语句时,就会跳转到标志的位置。 一、goto语句的语法 (1)goto在前,标志…...
AI 编码 2.0 分析、思考与探索实践:从 Cursor Composer 到 AutoDev Sketch
在周末的公司【AI4SE 效能革命与实践:软件研发的未来已来】直播里,我分享了《AI编码工具 2.0 从 Cursor 到 AutoDev Composer》主题演讲,分享了 AI 编码工具 2.0 的核心、我们的思考、以及我们的 AI 编码工具 2.0 探索实践。 在这篇文章中&am…...
Linux与自动化的基础
Linux简介 Linux是一种开源的类Unix操作系统,广泛应用于服务器、桌面和嵌入式设备。常见的Linux发行版包括 Ubuntu、CentOS 和 Debian,它们各有特色,但都以稳定性和安全性著称。 与图形界面相比,Linux的**命令行界面(…...
安全开发-环境选择
文章目录 个人心得虚拟机选择ubuntu 22.04python环境选择conda下载使用: 个人心得 在做开发时配置一个专门的环境可以使我们在开发中的效率显著提升,可以避免掉很多环境冲突的报错。尤其是python各种版本冲突,还有做渗透工具不要选择windows…...
JVM垃圾回收机制全解析
Java虚拟机(JVM)中的垃圾收集器(Garbage Collector,简称GC)是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象,从而释放内存空间,避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
stm32wle5 lpuart DMA数据不接收
配置波特率9600时,需要使用外部低速晶振...
阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)
cd /home 进入home盘 安装虚拟环境: 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境: virtualenv myenv 3、激活虚拟环境(激活环境可以在当前环境下安装包) source myenv/bin/activate 此时,终端…...
加密通信 + 行为分析:运营商行业安全防御体系重构
在数字经济蓬勃发展的时代,运营商作为信息通信网络的核心枢纽,承载着海量用户数据与关键业务传输,其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级,传统安全防护体系逐渐暴露出局限性&a…...
[特殊字符] 手撸 Redis 互斥锁那些坑
📖 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作,想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁,也顺便跟 Redisson 的 RLock 机制对比了下,记录一波,别踩我踩过…...
CSS3相关知识点
CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...
数据库正常,但后端收不到数据原因及解决
从代码和日志来看,后端SQL查询确实返回了数据,但最终user对象却为null。这表明查询结果没有正确映射到User对象上。 在前后端分离,并且ai辅助开发的时候,很容易出现前后端变量名不一致情况,还不报错,只是单…...
JS的传统写法 vs 简写形式
一、条件判断与逻辑操作 三元运算符简化条件判断 // 传统写法 let result; if (someCondition) {result yes; } else {result no; }// 简写方式 const result someCondition ? yes : no;短路求值 // 传统写法 if (condition) {doSomething(); }// 简写方式 condition &…...
HarmonyOS-ArkUI 自定义弹窗
自定义弹窗 自定义弹窗是界面开发中最为常用的一种弹窗写法。在自定义弹窗中, 布局样式完全由您决定,非常灵活。通常会被封装成工具类,以使得APP中所有弹窗具备相同的设计风格。 自定义弹窗具备的能力有 打开弹窗自定义布局,以…...
动态生成element-plus的scss变量;SCSS中实现动态颜色变体生成
文章目录 一、动态css变量1.生成内容2.动态生成css变量2.1新增_color-utils.scss(不推荐)2.2新增_color-utils.scss(推荐)2.3theme.scss引入使用 一、动态css变量 1.生成内容 在我们修改element-plus主题色时候,会自…...
