el-select 实现分页加载,切换也数滚回到顶部,自定义高度

news2025/6/7 3:20:43

el-select 实现分页加载,切换也数滚回到顶部,自定义高度

在这里插入图片描述

1.html
 <el-form-item label="俱乐部:" prop="club_id" label-width="120px">
        <el-select :disabled="Boolean(match_id)" style="width: 100%" v-model="matchForm.club_id"
          placeholder="请输入搜索或选择" filterable remote popper-class="eloption" :remote-method="remoteMethods"
          :loading="loading">
          <el-option v-for="item in clubList" :key="item.club_id" :label="item.club_name" :value="item.club_id">
          </el-option>
            
          <!-- 分页器 -->
          <div class="flex justify-center flexac"
            style="position: sticky; bottom: 0; background: white; z-index: 1; padding: 0 0;">
            <pagination v-model:page="searchForm.page" v-model:limit="searchForm.list_rows" :total="total"
              @pagination="myClub" layout="prev, pager, next, jumper" />
          </div>
        </el-select>
      </el-form-item>


2.功能 js
1. 切换回到顶部
 // 添加重置滚动位置的逻辑
    nextTick(() => {
      const dropdown = document.querySelector('.el-select-dropdown .el-scrollbar__wrap');
      if (dropdown) {
        dropdown.scrollTop = 0;
      }
    });
    
    
2.搜索方法
const remoteMethods = (query) => {
  searchForm.value.page = 1;
  searchForm.value.keyword = query;
 //调用数据  
  getdata();
};
3.样式
// 高度
<style>
.eloption .el-select-dropdown__wrap {
  max-height: 500px !important;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2402403.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Langchaine4j 流式输出 (6)

Langchaine4j 流式输出 大模型的流式输出是指大模型在生成文本或其他类型的数据时&#xff0c;不是等到整个生成过程完成后再一次性 返回所有内容&#xff0c;而是生成一部分就立即发送一部分给用户或下游系统&#xff0c;以逐步、逐块的方式返回结果。 这样&#xff0c;用户…

学习经验分享【40】目标检测热力图制作

目标检测热力图在学术论文&#xff08;尤其是计算机视觉、深度学习领域&#xff09;中是重要的可视化分析工具和论证辅助手段&#xff0c;可以给论文加分不少。主要作用一是增强论文的可解释性与说服力&#xff1a;论文中常需解释模型 “如何” 或 “为何” 检测到目标&#xf…

C#里与嵌入式系统W5500网络通讯(3)

有与W5500通讯时,需要使用下面的寄存器: PHYCFGR (W5500 PHY Configuration Register) [R/W] [0x002E] [0b10111XXX] PHYCFGR configures PHY operation mode and resets PHY. In addition, PHYCFGR indicates the status of PHY such as duplex, Speed, Link. 这张表格详细…

用OpenNI2获取奥比中光Astra Pro输出的深度图(win,linux arm64 x64平台)

搞了一个奥比中光Astra Pro&#xff0c;想在windows平台&#xff0c;和linux rk3588 &#xff08;香橙派&#xff0c;ubuntu2404,debian)上获取深度信息&#xff0c;之前的驱动下载已经不好用了,参考如下 Astra 3D相机选型建议 - 知乎https://zhuanlan.zhihu.com/p/594485674 …

Unity VR/MR开发-VR设备与适用场景分析

视频讲解链接&#xff1a;【XR马斯维】VR/MR设备与适用场景分析&#xff1f;【UnityVR/MR开发教程--入门】_游戏热门视频

Linux: network: switch:arp cache更新规则 [chatGPT]

文章目录 介绍概念普通包带有不同的mac,是否更新arp cache?普通包带有相同的mac,是否刷新 aging timeswitch是否会主动学习介绍 关于arp cache在switch侧的行为。有很多问题需要理解。 概念 HP L3 - IP Services Configuration Guide 文档里有写:dynamic arp entry的解说…

Java网络编程API 1

Java中的网络编程API一共有两套&#xff1a;一套是UDP协议使用的API&#xff1b;另一套是TCP协议使用的API。这篇文章我们先来介绍UDP版本的API&#xff0c;并尝试来写一个回显服务器&#xff08;接收到的请求是什么&#xff0c;返回的响应就是什么&#xff09;。 UDP数据报套…

兰亭妙微 | 医疗软件的界面设计能有多专业?

从医疗影像系统到手术机器人控制界面&#xff0c;从便携式病原体检测设备到多平台协同操作系统&#xff0c;兰亭妙微为众多医疗设备研发企业&#xff0c;打造了兼具专业性与可用性的交互界面方案。 我们不仅做设计&#xff0c;更深入理解医疗场景的实际需求&#xff1a; 对精…

前端原生构建交互式进度步骤组件(Progress Steps)

在现代网页设计中&#xff0c;进度步骤&#xff08;Progress Steps&#xff09; 是一种常见的 UI 模式&#xff0c;常用于引导用户完成注册流程、多步表单、教程或任何需要分步骤操作的场景。本文将带你从零开始构建一个美观且功能完整的 “进度步骤”组件&#xff0c;并详细讲…

【基于阿里云搭建数据仓库(离线)】Data Studio创建资源与函数

Data Studio支持在您的数据分析代码中引用自定义的资源和函数&#xff08;支持MaxCompute、EMR、CDH、Flink&#xff09;&#xff0c;您需要先创建或上传资源、函数至目标工作空间&#xff0c;上传后才可在该工作空间的任务中使用。您可参考本文了解如何使用DataWorks可视化方式…

web3-以太坊智能合约基础(理解智能合约Solidity)

以太坊智能合约基础&#xff08;理解智能合约/Solidity&#xff09; 无需编程经验&#xff0c;也可以帮助你了解Solidity独特的部分&#xff1b;如果本身就有相应的编程经验如java&#xff0c;python等那么学起来也会非常的轻松 一、Solidity和EVM字节码 实际上以太坊链上储存…

【C++项目】负载均衡在线OJ系统-2

文章目录 oj_server模块编写oj_server框架的搭建-oj_server/oj_server.cpp 路由框架 oj_model模块编写题目信息设置v1.文件版本-common/util.hpp boost库spilt函数的使用-oj_server/oj_model_file.hpp 文件版本model编写v2.mysql数据库版本1.mysql创建授权用户、建库建表录入操…

GC1809:高性能24bit/192kHz音频接收芯片解析

1. 芯片概述 GC1809 是数字音频接收芯片&#xff0c;支持IEC60958、S/PDIF、AES3等协议&#xff0c;集成8选1输入切换、低抖动时钟恢复和24bit DAC&#xff0c;适用于家庭影院、汽车音响等高保真场景。 核心特性 高精度&#xff1a;24bit分辨率&#xff0c;动态范围105dB&…

2025年06月05日Github流行趋势

项目名称&#xff1a;onlook 项目地址url&#xff1a;https://github.com/onlook-dev/onlook项目语言&#xff1a;TypeScript历史star数&#xff1a;16165今日star数&#xff1a;1757项目维护者&#xff1a;Kitenite, drfarrell, spartan-vutrannguyen, apps/devin-ai-integrat…

基于BI PaaS架构的衡石HENGSHI SENSE平台技术解析:重塑企业级数据分析基座

在数据驱动决策的时代&#xff0c;传统BI工具日益显露出扩展性弱、灵活性差、资源利用率低等痛点。衡石科技推出的HENGSHI SENSE平台&#xff0c;创新性地采用BI PaaS&#xff08;平台即服务&#xff09;架构&#xff0c;为企业构建了一个强大、开放、可扩展的数据分析基础设施…

【R语言编程绘图-plotly】

安装与加载 在R中使用plotly库前需要安装并加载。安装可以通过CRAN进行&#xff0c;使用install.packages()函数。加载库使用library()函数。 install.packages("plotly") library(plotly)测试库文件安装情况 # 安装并加载必要的包 if (!requireNamespace("p…

通信刚需,AI联手ethernet/ip转profinet网关打通工业技术难关

工业人工智能&#xff1a;食品和饮料制造商的实际用例通信刚需 了解食品饮料制造商如何利用人工智能克服业务挑战 食品和饮料制造商正面临劳动力短缺、需求快速变化、运营复杂性加剧以及通胀压力等挑战。如今&#xff0c;生产商比以往任何时候都更需要以更少的投入实现更高的…

JavaEE->多线程:定时器

定时器 约定一个时间&#xff0c;时间到了&#xff0c;执行某个代码逻辑&#xff08;进行网络通信时常见&#xff09; 客户端给服务器发送请求 之后就需要等待 服务器的响应&#xff0c;客户端不可能无限的等&#xff0c;需要一个最大的期限。这里“等待的最大时间”可以用定时…

<el-table>构建树形结构

最佳实践 el-table实现树形结构主要依靠row-key和tree-props来实现的。 &#x1f4ab; 无论是el-table实现的树形结构还是el-tree组件都是绑定的树形结构的数据&#xff0c;因此如果数据是扁平的话&#xff0c;需要进行树化。 代码 <template><div><el-table:d…

linux——磁盘和文件系统管理

1、磁盘基础简述 1.1 硬盘基础知识 硬盘&#xff08;Hard Disk Drive&#xff0c;简称 HDD&#xff09;是计算机常用的存储设备之一. p如果从存储数据的介质上来区分&#xff0c;硬盘可分为机械硬盘&#xff08;Hard Disk Drive, HDD&#xff09;和固态硬盘&#xff08;Soli…