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

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

1.html
vue 复制代码
 <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
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.样式
vue 复制代码
// 高度
<style>
.eloption .el-select-dropdown__wrap {
  max-height: 500px !important;
}
</style>
相关推荐
liaojuajun11 分钟前
可视化地图
开发语言·javascript·ecmascript
真的想不出名儿37 分钟前
登录前验证码校验实现
java·前端·python
小高00737 分钟前
前端如何优雅地生成唯一标识?——一份跨环境 UUID 工具函数的封装与实战
前端·javascript·vue.js
云舟吖41 分钟前
Playwright的元素定位器
前端
我是日安42 分钟前
从零到一打造 Vue3 响应式系统 Day 24 - Watch:Options
前端·javascript·vue.js
吹晚风吧43 分钟前
什么是跨域?跨域怎么解决?跨域解决的是什么问题?
java·vue.js·js·cors
浅浅的学一下1 小时前
实现在富文本中直接Ctrl+C复制图片并自动上传,并支持HTML格式的图片的复制
前端
wifi歪f1 小时前
🎨 探究Function Calling 和 MCP 的奥秘
前端·ai编程·mcp
BrendanDash1 小时前
React 19.2 已发布,现已上线 npm!
前端·react.js
sheji34161 小时前
【开题答辩全过程】以 Web数据挖掘在电子商务中的应用研究为例,包含答辩的问题和答案
前端·人工智能·数据挖掘