当前位置: 首页 > news >正文

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.解决问题 场景&#xff1a;下拉数据量过大&#xff0c;后端提供一个分页查询接口&#xff1b;需要每次滚动加载下一页的下拉数据 且单选的状态&#xff0c;需要支持回显&#xff0c;通过n…...

Spring Boot面试题

Spring Boot面试题 基础概念 Q1: Spring Boot的核心特性有哪些&#xff1f; public class SpringBootBasicDemo {// 1. 自动配置SpringBootApplicationpublic class DemoApplication {public static void main(String[] args) {SpringApplication.run(DemoApplication.class…...

STM32-智能小车项目

项目框图 ST-link接线 实物图&#xff1a; 正面&#xff1a; 反面&#xff1a; 相关内容 使用L9110S电机模块 电机驱动模块L9110S详解 | 良许嵌入式 一、让小车动起来 新建文件夹智能小车项目 在里面复制19-串口打印功能 重命名为01-让小车动起来 新建文件夹motor&…...

SAP-ABAP:ABAP第一代增强详解

在SAP ABAP开发中&#xff0c;第一代增强&#xff08;First-Generation Enhancement&#xff09; 是早期用于扩展标准程序功能的传统技术&#xff0c;主要通过预定义的增强点&#xff08;Enhancement Points&#xff09;实现。以下是详细解析&#xff1a; 一、第一代增强的核心…...

20分钟 Bash 上手指南

文章目录 bash 概念与学习目的第一个 bash 脚本bash 语法变量的使用位置参数管道符号&#xff08;过滤条件&#xff09;重定向符号条件测试命令条件语句case 条件分支Arrayfor 循环函数exit 关键字 bash 脚本记录历史命令查询文件分发内容 bash 概念与学习目的 bash&#xff0…...

地铁站内导航系统:基于蓝牙Beacon与AR技术的动态路径规划技术深度剖析

本文旨在分享一套地铁站内导航系统技术方案&#xff0c;通过蓝牙Beacon技术与AI算法的结合&#xff0c;解决传统导航定位不准确、路径规划不合理等问题&#xff0c;提升乘客出行体验&#xff0c;同时为地铁运营商提供数据支持与增值服务。 如需获取校地铁站内智能导航系统方案文…...

WordPress R+L Carrier Edition sql注入漏洞复现(CVE-2024-13481)(附脚本)

免责申明: 本文所描述的漏洞及其复现步骤仅供网络安全研究与教育目的使用。任何人不得将本文提供的信息用于非法目的或未经授权的系统测试。作者不对任何由于使用本文信息而导致的直接或间接损害承担责任。如涉及侵权,请及时与我们联系,我们将尽快处理并删除相关内容。 0x0…...

滴水逆向_引用_友元函数_运算符重载

作业&#xff1a; 运算符号重载实现。 struct Person { public:int x;int y; public:Person(){this->x 10;this->y 20;}Person(int x, int y){this->x x;this->y y;}//申明友元函数void Printf(const Person& p){printf("%d %d",p.x,p.y);}/…...

git中,如何查看具体单个文件的log

在 Git 中&#xff0c;可以使用多种方式查看单个文件的提交日志&#xff08;Log&#xff09;&#xff0c;以下详细介绍不同场景下的查看方法&#xff1a; 目录 一、基本命令查看文件的完整提交日志 二、查看文件提交日志并显示差异内容 三、限制显示的提交日志数量 四、按…...

如何生成traceid以及可视化展示

根据你的需求&#xff0c;以下是一些可以生成唯一 traceId 并用于分布式链路追踪的工具和项目&#xff0c;这些项目支持生成唯一的 traceId&#xff0c;并将其用于日志记录和分布式追踪&#xff1a; 1. OpenTelemetry OpenTelemetry 是一个开源的观测框架&#xff0c;支持生成…...

2024 ICPC香港站 L.Flipping Paths的一种解法

太变态了&#xff0c;场上被硬控了两个小时&#xff0c;最后20分钟思路熬出来了但是没写对~&#xff0c;糖完了。怎么说呢&#xff0c;香港站这样的轻量级赛站&#xff0c;这次强队也很少&#xff0c;导致很多题目的难度升级了&#xff0c;这道L题是一道银牌题&#xff0c;不少…...

Uniapp 开发中遇到的坑与注意事项:全面指南

文章目录 1. 引言Uniapp 简介开发中的常见问题本文的目标与结构 2. 环境配置与项目初始化环境配置问题解决方案 项目初始化注意事项解决方案 常见错误与解决方案 3. 页面与组件开发页面生命周期注意事项示例代码 组件通信与复用注意事项示例代码 样式与布局问题注意事项示例代码…...

Python - 代码片段分享 - Excel 数据实时写入方法

文章目录 前言注意事项工具 pandas1. 简介2. 安装方式3. 简单介绍几个api 实战片段 - 实时写入Excel文件结束语 要么出众&#xff0c;要么出局 前言 我们在爬虫采集过程中&#xff0c;总是将数据解析抓取后统一写入Excel表格文件&#xff0c;如果在解析数据出现问题容易出现数据…...

一文详解U盘启动UEFI/Legacy方式以及GPT/MBR关系

对于装系统的老手而说一直想研究一下装系统的原理&#xff0c;以及面对一些问题时的解决思路&#xff0c;故对以前的方法进行原理上的解释&#xff0c;主要想理解其底层原理。 引导模式 MBR分区可以同时支持UEFI和Legacy引导&#xff0c;我们可以看一下微pe制作的启动盘&#…...

Java函数式接口的巧妙应用

引言 函数式接口&#xff08;Functional Interface&#xff09;是Java 8引入的一个重要概念&#xff0c;它是Lambda表达式和方法引用的基础。通过函数式接口&#xff0c;Java实现了对函数式编程的支持&#xff0c;让代码更加简洁、灵活。本文将带你深入理解函数式接口&#xf…...

爱普生SG-8101CE可编程晶振赋能智能手机的精准心脏

在智能手机高速迭代的今天&#xff0c;高性能、低功耗与小型化已成为核心诉求。智能手机作为人们生活中不可或缺的工具&#xff0c;需要在各种复杂场景下稳定运行。爱普生SG-8101CE可编程晶振凭借其卓越性能&#xff0c;成为智能手机中不可或缺的精密时钟源&#xff0c;为通信、…...

条件渲染

当if条件为true则会被显示出来&#xff0c;若为false则不会显示出来。 在App.vue中需要引用一下。 if else一样的if为真则显示if的内容&#xff0c;若不是则显示else下的内容。 多条件判断。 if在为false时&#xff0c;根本不会渲染&#xff0c;而show则会&#xff0c;只不过d…...

sklearn中的决策树-分类树:剪枝参数

剪枝参数 在不加限制的情况下&#xff0c;一棵决策树会生长到衡量不纯度的指标最优&#xff0c;或者没有更多的特征可用为止。这样的决策树 往往会过拟合。为了让决策树有更好的泛化性&#xff0c;我们要对决策树进行剪枝。剪枝策略对决策树的影响巨大&#xff0c;正确的剪枝策…...

算法随笔_59: 子数组最小乘积的最大值

上一篇:算法随笔_58: 队列中可以看到的人数-CSDN博客 题目描述如下: 一个数组的 最小乘积 定义为这个数组中 最小值 乘以 数组的 和 。 比方说&#xff0c;数组 [3,2,5] &#xff08;最小值是 2&#xff09;的最小乘积为 2 * (325) 2 * 10 20 。 给你一个正整数数组 nums …...

线性模型 - 支持向量机延伸

为了更好的理解支持向量机模型&#xff0c;本文我们延伸学习和理解一下和支持向量机相关的一些概念&#xff0c;这些概念都是偏理论和数学的知识&#xff0c;比较抽象和复杂&#xff0c;而且需要一定的高等数学知识。大家可以先明白其所包含的意义&#xff0c;然后逐步深入理解…...

力扣3464. 正方形上的点之间的最大距离

力扣3464. 正方形上的点之间的最大距离 题目 题目解析及思路 题目要求在points集合中找出k个点&#xff0c;k个点之间的最小的曼哈顿距离的最大值 最大最小值的题一般直接想到二分 将正方形往右展开成一条线&#xff0c;此时曼哈顿距离为两点直线距离**(仅起点右边的点)** …...

AI数字人源码搭建部署指南

为实现AI数字人的智能交互功能&#xff0c;需开发包含语音识别、自然语言处理、机器学习等技术的AI算法和模型。利用TensorFlow、PyTorch等深度学习框架完成模型训练。具体步骤包括以下四个方面&#xff1a; 需求分析&#xff1a;通过市场调研、用户访谈、专家咨询等方式&…...

智能拖把控制板开发

智能拖把控制板开发全流程解析 一、硬件架构与H桥驱动设计 工程师小明选用四颗AO3400A低导通电阻MOS管构建H桥驱动拓扑&#xff0c;实测全桥导通电阻仅15mΩ&#xff0c;较传统方案降低40%损耗。通过优化PCB布局将驱动环路电感控制在15nH以内&#xff0c;配合10kHz互补PWM信号…...

【Swift 算法实战】利用 KMP 算法高效求解最短回文串

网罗开发 &#xff08;小红书、快手、视频号同名&#xff09; 大家好&#xff0c;我是 展菲&#xff0c;目前在上市企业从事人工智能项目研发管理工作&#xff0c;平时热衷于分享各种编程领域的软硬技能知识以及前沿技术&#xff0c;包括iOS、前端、Harmony OS、Java、Python等…...

【数字化转型+AI:现代企业腾飞的一对翅膀】

——解析数字时代的核心竞争力 在全球化竞争与技术迭代加速的今天&#xff0c;传统企业若想突破增长瓶颈&#xff0c;必须抓住两大核心驱动力&#xff1a;‌数字化转型‌与‌人工智能&#xff08;AI&#xff09;‌。这两大技术如同企业腾飞的双翼&#xff0c;共同构建敏捷性、创…...

Zabbix——踩坑HttpRequest,header添加无效

背景 在试图尝试通过Zabbix接入DeepSeek API的时候&#xff0c;由于使用了HTTP的方式&#xff0c;所以需要使用Zabbix 自带的HttpRequest库进行请求&#xff0c;产生了下面的问题 问题 curl curl -X POST https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completio…...

MTK Android12 预装apk可卸载

文章目录 需求解决方法1、device/mediatek/mt6761/device.mk2、/vendor/mediatek/proprietary/frameworks/base/data/etc/pms_sysapp_removable_vendor_list.txt3、路径&#xff1a;4、Android.mk 需求 近期&#xff0c;客户需要预装一个apk&#xff0c;同时该apk要可卸载。解…...

让网页“浪“起来:打造会呼吸的波浪背景

每次打开那些让人眼前一亮的网页时&#xff0c;你是否有注意到那些看似随波逐流的动态背景&#xff1f;今天咱们不聊高深的技术&#xff0c;就用最朴素的CSS&#xff0c;来解锁这个让页面瞬间鲜活的秘籍。无需JavaScript&#xff0c;不用复杂框架&#xff0c;准备好一杯咖啡&am…...

YOLO11的单独推理程序

YOLO11的单独推理程序,可以实例化加载一次多次推理。 YOLO11的单独推理程序,可以实例化加载一次多次推理。 YOLO11的单独推理程序,可以实例化加载一次多次推理。 YOLO11的单独推理程序,可以实例化加载一次多次推理。 YOLO11的单独推理程序,可以实例化加载一次多次推理…...

代码随想录day21

669.修剪二叉搜索树 //理解修建后重建树的概念 TreeNode* trimBST(TreeNode* root, int low, int high) {if(root nullptr) return nullptr;if(root->val < low){TreeNode* node trimBST(root->right, low, high);return node;}if(root->val > high){TreeNod…...

利用Ai对生成的测试用例进行用例评审

利用AI对生成的测试用例进行用例评审,可以从用例的完整性、有效性、一致性等多个维度展开,借助自然语言处理、机器学习等技术,提高评审效率和准确性。以下为你详细介绍具体方法: 1. 需求匹配度评审 利用自然语言处理(NLP)技术 步骤:首先将软件需求文档和生成的测试用例…...

JAVAweb-JS基本数据类型,变量,DOM,pop,push函数,事件

JavaScript,可以嵌套在静态页面中添加一些动态语言. JavaScript是开发web脚本语言,但也被用到了很多非浏览器环境中,比如node平台 JS可以嵌套在静态页面中可以给静态页面添加一些动态效果(脚本语言),不同浏览器厂商(在浏览器中都有内置解析器解析JS语法) <!DOCTYPE html&g…...

SpringBoot源码解析(十一):准备应用上下文

SpringBoot源码系列文章 SpringBoot源码解析(一)&#xff1a;SpringApplication构造方法 SpringBoot源码解析(二)&#xff1a;引导上下文DefaultBootstrapContext SpringBoot源码解析(三)&#xff1a;启动开始阶段 SpringBoot源码解析(四)&#xff1a;解析应用参数args Sp…...

Python CNN基于深度学习的轴承故障智能检测平台

一、 项目概述 本项目旨在利用深度学习技术&#xff0c;构建一个基于Python的轴承故障智能检测平台。该平台能够对轴承的振动信号进行分析&#xff0c;自动识别轴承的健康状态&#xff0c;并判断故障类型&#xff0c;从而实现轴承故障的早期预警和诊断&#xff0c;提高设备的运…...

CCNP知识笔记

路由选路原理 路由信息来源 路由信息怎么来的&#xff1f; 直连路由&#xff08;C&#xff09;&#xff1a; 通过直连接口UP产生智联路由条目&#xff08;物理层UP数据链路层UP&#xff09; 静态路由&#xff08;S&#xff09;&#xff1a; 通过网络管理员逐条写入的路由条…...

递归树求解递归方程

*递归树是迭代计算模型 *递归树的生成过程与迭代过程一致 *根据递归定义不断扩展递归树&#xff0c;直到边界条件&#xff08;其值已知&#xff09; *对递归树产生的所有项求和就是递归方程的解 例一&#xff1a; T(n) 1 n1 T(n) 2T(n/2) n n>1 对于…...

2025年【熔化焊接与热切割】找解析及熔化焊接与热切割模拟试题

在当今工业领域&#xff0c;熔化焊接与热切割技术作为重要的加工手段&#xff0c;广泛应用于各种金属结构的制造与维修中。然而&#xff0c;这些作业过程伴随着高风险&#xff0c;对从业人员的安全知识和技能提出了极高的要求。为了提升相关人员的安全意识和操作技能&#xff0…...

Linux系统:服务器常见服务默认IP端口合集

服务器的默认IP端口取决于所使用的协议和服务类型。以下是一些常见服务和协议的默认端口&#xff1a; 服务端口实例&#xff1a; HTTP服务 默认端口&#xff1a;80 说明&#xff1a;用于普通的HTTP网页访问。例如&#xff0c;访问 http://example.com 时&#xff0c;默认使用8…...

LangChain教程 - RAG - PDF摘要

系列文章索引 LangChain教程 - 系列文章 随着人工智能和大语言模型&#xff08;LLM&#xff09;的快速发展&#xff0c;越来越多的工具和平台被引入以简化我们的日常任务。LangChain是一个非常强大的框架&#xff0c;它能够帮助开发者构建与LLM&#xff08;如OpenAI、Ollama等…...

[java基础-JVM篇]3_JVM类加载机制

摘要&#xff1a;JVM通过设立不同优先级和职责的加载器保证了类加载的安全性与灵活性&#xff0c;即双亲委派机制&#xff0c;但是实际生产中更复杂的需求又需要破坏双亲委派&#xff0c;即打破JVM约定过的类加载程序 目录 类的生命周期 类加载 加载 类加载器 双亲委派机制…...

相似性搜索(2)

在本篇中&#xff0c;我们通过播客相似性搜索为例&#xff0c;进一步研究基于chroma 的相似性搜索&#xff1a; 参考&#xff1a; https://www.kaggle.com/code/switkowski/building-a-podcast-recommendation-engine/notebook 数据集来源&#xff1a; https://www.kaggle.…...

Linux 本地部署 Deepseek-R1 大模型!

DeepSeek-R1 的发布&#xff0c;掀起了一场风暴&#xff01; 开源、强大、本地可部署&#xff0c;真正私有的 AI 助手&#xff0c;不受网络、隐私等限制&#xff0c;数据安全感直接拉满&#xff01; 今天&#xff0c;手把手带你在 Linux 上本地部署 DeepSeek-R1&#xff0c;关…...

软件测试高频面试题

以下是一些软件测试高频面试题&#xff1a; 基础概念类 HTTP和HTTPS的区别&#xff1a;HTTPS使用SSL/TLS协议对传输数据加密&#xff0c;HTTP没有加密&#xff1b;HTTPS可确保数据完整性&#xff0c;防止传输中被篡改&#xff0c;HTTP不保证&#xff1b;HTTP默认用80端口&…...

光明谷推出AT指令版本的蓝牙音箱SOC 开启便捷智能音频开发新体验

前言 在蓝牙音箱市场竞争日益激烈的当下&#xff0c;开发一款性能卓越且易于上手的蓝牙音箱&#xff0c;成为众多厂商追求的目标。而光明谷科技有限公司推出的 AT 指令版本的蓝牙音箱 SOC&#xff0c;无疑为行业带来了全新的解决方案&#xff0c;以其诸多独特卖点&#xff0c;迅…...

数据安全_笔记系列01:数据分类分级与敏感数据识别详解

数据安全_笔记系列01&#xff1a;数据分类分级与敏感数据识别详解 1)、数据分类分级与敏感数据识别详解 数据分类分级是数据安全治理的核心环节&#xff0c;旨在根据数据的敏感性和重要性&#xff0c;制定差异化的保护策略。以下从 定义、法规、方法、工具、案例 等维度全面解…...

SOUI基于Zint生成UPC码

UPC 码&#xff08;Universal Product Code&#xff0c;通用产品代码&#xff09;是一种广泛使用的条形码系统&#xff0c;主要用于零售商品的标识和追踪。有两种主要格式&#xff1a;UPC-A 和 UPC-E。 UPC-A 长度12位数字。适用于大型商品 UPC-E 长度8位数字。UPC-E是UPC-A…...

MySQL 主从同步延迟:原因剖析与解决之道

在现代数据库应用中&#xff0c;MySQL 的主从同步是一种常见且重要的架构模式&#xff0c;它能提供数据备份、读写分离等诸多优势&#xff0c;有效提升系统的可用性和性能。然而&#xff0c;主从同步延迟问题却常常困扰着数据库管理员和开发者&#xff0c;严重时甚至会影响业务…...

C语言数据结构—二叉树的链式结构实现

目录 1、建立二叉树 1.1 二叉树的结构 1.2 手动建立二叉树 2、二叉树的遍历 2.1 二叉树的三种遍历方式 2.1.1 前序遍历 2.1.2 中序遍历 2.1.2 后序遍历 3、求二叉树的结点数和二叉树的高度 3.1 求二叉树结点数 3.2 求二叉树叶子结点 3.3 求二叉树第k层结点的个数 …...

sysbench压测pgsql数据库 —— 筑梦之路

这里主要使用sysbench工具对Pgsql数据库进行基准测试。 1. 创建数据库和用户名 # 创建用户和数据库CREATE USER sysbench WITH PASSWORD 123456;CREATE DATABASE sysbench owner sysbench;# 给用户授权访问 vim pg_hba.confhost sysbench sysbench 127…...

超级详细Spring AI运用Ollama大模型

大模型工具Ollama 官网:https://ollama.com/ Ollama是一个用于部署和运行各种开源大模型的工具; 它能够帮助用户快速在本地运行各种大模型&#xff0c;极大地简化了大模型在本地运行的过程。用户通过执行几条命令就能在本地运行开源大模型&#xff0c;如Lama 2等; 综上&#x…...