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…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问(基础概念问题) 1. 请解释Spring框架的核心容器是什么?它在Spring中起到什么作用? Spring框架的核心容器是IoC容器&#…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
nnUNet V2修改网络——暴力替换网络为UNet++
更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...
认识CMake并使用CMake构建自己的第一个项目
1.CMake的作用和优势 跨平台支持:CMake支持多种操作系统和编译器,使用同一份构建配置可以在不同的环境中使用 简化配置:通过CMakeLists.txt文件,用户可以定义项目结构、依赖项、编译选项等,无需手动编写复杂的构建脚本…...
书籍“之“字形打印矩阵(8)0609
题目 给定一个矩阵matrix,按照"之"字形的方式打印这个矩阵,例如: 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为:1,…...
