可分页+可远程搜索的select框实现（单选）

最新推荐文章于 2024-05-16 10:56:48 发布
最新推荐文章于 2024-05-16 10:56:48 发布
阅读量2.4k 收藏 8
点赞数
分类专栏： vue 文章标签： 多功能select框 可分页 可远程搜索 vue element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42832446/article/details/100918138
版权

先看一下效果

在这里插入图片描述

接下来说明实现的方式，最后再贴出完整的相关代码

一、分页实现（滚动到底部会进行下一页的加载）：

  • 监听滚动条是否滚到到底部
  • 到底部了判断是否要加载数据

1.下拉列表设置一个id（selected-content），用于声明滚动条事件

<div class="selected-content" id="selected-content" style="display: none">
      .....暂略
    </div>

2.在mounted中声明滚动条事件（selectScroll（））

mounted () {
    let that = this;
    // 声明滚动条滚动事件
    document.getElementById('selected-content').addEventListener('scroll', this.selectScroll);
  },

3.监听事件

// 滚动条滚动事件，在mounted要声明该事件(select框分页)
    selectScroll () {
      let that = this;
      // 变量scrollTop是滚动条滚动时，距离顶部的距离
      that.scrollTop = document.getElementById('selected-content').scrollTop;
      // 变量divHeight是可视区的高度
      let divHeight = document.getElementById('selected-content').clientHeight;
      // 变量scrollHeight是滚动条的总高度
      let scrollHeight = document.getElementById('selected-content').scrollHeight;
      // 滚动条到底部的条件
      if (that.scrollTop + divHeight === scrollHeight) {
        console.log('到底部啦!!!!!!!!!!!!!!!!!!!');
        // 若总数除以每页的数量大于当前页码的，说明数据还没加载完，继续向后台加载数据
        if (that.totalTenants / that.pageSize > that.currentPageNumber) {
          that.loading = true;
          that.pageNumber++;
          // 获取数据
          that.searchTotalTenants();
        }
      }
    },

二、远程搜索实现
1.添加keyup事件（selectKeyDown()），键盘弹起时候进行后台搜索

<input class="el-input__inner"
          id="tentant-input"
          v-model="tenantName"
          type="text"
          @click="inputClick()"
          @keyup="selectKeyDown()"
          onautocomplete="off"
          placeholder="请选择"
          style="width: 200px">

// select框键盘弹起事件（键盘弹起时，触发搜索事件）
    selectKeyDown () {
      let that = this;
      that.pageNumber = 1;
      that.pageSize = 15;
      // 向后台查询时，将原来select框的值置空
      that.tenantOptions = [];
      // 重新获取数据
      that.searchTotalTenants();
      // 搜索时弹出下拉列表
      $('#selected-content').fadeIn(400);
    },

以上主体功能实现了，接下来说一下次要功能

1.清除input事件

// 清除input值事件
    deleteButtonClick () {
      let that = this;
      // 一系列的条件初始化（根据你的实际项目做修改）
      that.tenantName = '';
      // 清除选中的高亮颜色
      that.current = '';
      // 清空时做input的focus和下拉列表的显示
      $('#tentant-input').focus();
      $('#selected-content').fadeIn(400);
    },

2.高亮选中颜色的实现

  • 动态绑定一个class（ v-bind:class="{ selected: index === current}"）
  • 列表内容点击时候，在事件中将index赋值给current，这样就可以实现高亮选中颜色了
<div class="selected-content" id="selected-content" style="display: none">
      <ul class="el-scrollbar__view el-select-dropdown__list ul-content" >
        <li class="el-select-dropdown__item" v-bind:class="{ selected: index === current}"
            v-for="(i, index) in tenantOptions" :key="index" @click="contentClick(i.value, i.label, index)">
          <span>{{i.label}}</span>
        </li>
      </ul>
 </div>

// 下拉框内容点击事件
    contentClick (tenantId, tenantName, index) {
      let that = this;
      // 选择时设置字体颜色
      that.current = index;
      // 选取的值回显到input框（根据自己的项目进行修改即可）
      that.tenantIdValue = tenantId;
      that.tenantName = JSON.parse(JSON.stringify(tenantName));
      // 选值后关闭下拉框
      $('#selected-content').slideToggle(400);
    },

3.下拉列表的显隐

// select Input框点击事件
    inputClick () {
      // 弹出下拉框
      $('#selected-content').slideToggle(400);
    },

以上主次功能都已实现，接下来贴一下相关的完整代码

dom内容

<!--input框-->
    <div class="el-select el-select--small">
      <div class="el-input el-input--small el-input--suffix"
           @mouseover="tenantName? isDeleteButton=true : isDeleteButton=false"
           @mouseleave="isDeleteButton=false">
        <input class="el-input__inner" id="tentant-input" v-model="tenantName" type="text"
               @click="inputClick()" @keyup="selectKeyDown()" onautocomplete="off"
               placeholder="请选择" style="width: 200px">
        <!--点击删除select框的值时，将选中的样式去掉（current=''）-->
        <span class="delete-selected" v-if="isDeleteButton" @click="deleteButtonClick()">
          <i class="iconfont icon-fail"></i>
        </span>
      </div>
    </div>

<!--下拉列表-->
    <div class="selected-content" id="selected-content" style="display: none">
      <ul class="el-scrollbar__view el-select-dropdown__list ul-content" >
        <li class="el-select-dropdown__item" v-bind:class="{ selected: index === current}"
            v-for="(i, index) in tenantOptions" :key="index" @click="contentClick(i.value, i.label, index)">
          <span>{{i.label}}</span>
        </li>
      </ul>
      <p class="tip-class" v-if="tenantOptions.length === 0">暂无数据</p>
      <p class="tip-class" v-if="loading">数据加载中...</p>
      <p class="tip-class" v-if="isAllLoaded">没有更多数据了~</p>
    </div>

js（ps：放在编辑器看好一点~）

mounted () {
    // 声明滚动条滚动事件
    document.getElementById('selected-content').addEventListener('scroll', this.selectScroll);
  },

methods方法：

// selectInput框点击事件
    inputClick () {
      // 弹出下拉框
      $('#selected-content').slideToggle(400);
    },
    // select框键盘弹起事件（键盘弹起时，触发搜索事件）
    selectKeyDown () {
      let that = this;
      that.pageNumber = 1;
      that.pageSize = 15;
      // 向后台查询时，将原来select框的值置空
      that.tenantOptions = [];
      // 重新获取数据
      that.searchTotalTenants();
      // 搜索时弹出下拉列表
      $('#selected-content').fadeIn(400);
    },
    // 查询所有租户
    searchTotalTenants () {
      let that = this;
      // 查询租户
      ApiService.searchAllTenants({
        name: that.tenantName, //
        type: that.operationStatus === '正式' ? 0 : 1, // 正式/测试
        pageNumber: that.pageNumber,
        pageSize: that.pageSize
      }).then(res => {
        if (res.statusCode === 'OK') {
          // 获取租户总条数
          that.totalTenants = parseInt(res.data.total);
          // select框数据的当前页码
          that.currentPageNumber = parseInt(res.data.current);
          // 获取数据成功，隐藏select框加载中提示
          that.loading = false;
          let reDatas = res.data.records;
          for (let i in reDatas) {
            // 将租户id、租户名字、租户类型(个人or公共)存起来
            let tempObj = {value: reDatas[i].id, label: reDatas[i].name, tenantType: reDatas[i].payType, softConcurrency: reDatas[i].softConcurrency, crcConcurrency: reDatas[i].crcConcurrency};
            that.tenantOptions.push(tempObj);
          }
          // 后台已经没有数据了，select框提示“没有更多数据”
          if (that.totalTenants / that.pageSize === that.currentPageNumber) {
            that.isAllLoaded = true;
          }
        } else {
          this.$notify({
            message: '请求租户数据错误：' + res.message,
            type: 'warning',
            offset: 80,
            duration: 2000
          });
          // 获取数据失败，隐藏select框加载中提示
          that.loading = false;
        }
      })
    },
    // 清除input值事件
    deleteButtonClick () {
      let that = this;
      that.tenantName = '';
      that.current = '';
      $('#tentant-input').focus();
      $('#selected-content').fadeIn(400);
    },
    // 滚动条滚动事件，在mounted要声明该事件(select框分页)
    selectScroll () {
      let that = this;
      // 变量scrollTop是滚动条滚动时，距离顶部的距离
      that.scrollTop = document.getElementById('selected-content').scrollTop;
      // 变量divHeight是可视区的高度
      let divHeight = document.getElementById('selected-content').clientHeight;
      // 变量scrollHeight是滚动条的总高度
      let scrollHeight = document.getElementById('selected-content').scrollHeight;
      // console.log('距顶部' + that.scrollTop + '可视区高度' + divHeight + '滚动条总高度' + scrollHeight);
      // 滚动条到底部的条件
      if (that.scrollTop + divHeight === scrollHeight) {
        console.log('到底部啦!!!!!!!!!!!!!!!!!!!');
        // 若总数除以每页的数量大于当前页码的，说明数据还没加载完，继续向后台加载数据
        if (that.totalTenants / that.pageSize > that.currentPageNumber) {
          that.loading = true;
          that.pageNumber++;
          // 获取数据
          that.searchTotalTenants();
        }
      }
    },
    // 下拉框内容点击事件
    contentClick (tenantId, tenantName, index) {
      let that = this;
      // 选择时设置字体颜色
      that.current = index;
      // 选取的值回显到input框
      that.tenantIdValue = tenantId;
      that.tenantName = JSON.parse(JSON.stringify(tenantName));
      // 选值后关闭下拉框
      $('#selected-content').slideToggle(400);
    },

CSS：

  • 样式是根据element-ui改的，如果不用element-ui，要自己折腾一下样式~
  • 有一些element-ui内置的样式没有贴出来，安装了element-ui应该都可以的~
.delete-selected {
    float: right;
    margin-top: -23px;
    position: inherit;
    right: -61px;
    color: #d7d3d3;
    cursor: pointer;
  }
  .selected {
    font-weight:bold;
    color:#01baad;
  }
  .el-select .el-input {
    width: 130px;
  }
  .selected-content {
    position: absolute;
    top: 86px;
    left: 165px;
    width: 200px;
    max-height: 250px;
    background: #ffffff;
    border-radius: 4px;
    border: solid 1px #e4e7ed;
    overflow: auto;
    z-index: 999;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }
  .tip-class {
    text-align: center;
    height: 30px;
    line-height: 30px;
    color: #b8b4b4;
    font-size: 15px;
    background-color: #f4f4f4;
  }
椒盐大肥猫
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
select2-4.0.8.zip
04-02
2. **多选支持**：除了单选模式，Select2还支持多选，允许用户同时选择多个选项，通过`multiple`属性轻松开启。 3. **自定义数据源**：不局限于HTML的`<option>`标签，Select2可以接受任何可迭代的数据源，如JSON...
select2(jquery)插件下载
07-21
2. **多选支持**: Select2不仅支持单选，还支持多选模式，用户可以通过简单的标记设置来实现。 3. **自定义模板**: 提供了自定义模板的功能，可以自由定制选项的展示样式，包括添加图片、图标等元素。 4. **分页...
elementUI select远程搜索分页，实现滚动条下拉分页
HuangsTing的博客
08-25 2683
//template <el-select v-model="form.userCode" v-el-select-loadmore="loadmore" filterable remote reserve-keyword placeholder="通过手机号进行查询" :remote-method="userRemoteMethod" :loading="personLoading" > <el-option v-for="item in pe
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
主要介绍了element-ui 远程搜索组件el-select在项目中组件化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）_el-select 分页
最新发布
2401_84433535的博客
05-16 1161
11，transform、translate、transition 分别是什么属性？它和其它框架（jquery）的区别是什么？描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？14，对前端性能优化有什么了解？13，javascript 的垃圾回收机制讲一下,6，DOM 事件有哪些阶段？5，两栏布局，左边固定，右边自适应，左右不重叠。10，ES6 的 class 和构造函数的区别。Vue 的 nextTick 的原理是什么？Vue 中 key 值的作用？2，如何实现一个最大的正方形。
el-select 触底分页+远程搜索
热门推荐
stc_ljc的博客
06-20 13万+
大部分情况下使用 el-select 的时候，el-options 中 options 的值都是后端接口给的数据，直接赋值就可以了。但是有的时候数据量比较大，比如几千甚至上万条的时候，如果直接赋值，整个页面的 dom 会被撑爆，不仅请求全量数据接口的时候时间会很久，而且赋值完之后整个页面会非常卡。 解决方案: - 后端将接口改为分页的、前端将el-select下拉框中的数据改为滚动加载 - 后端将接口改为模糊搜索的形式，通过选择器中输入的内容去搜索模糊匹配的数据然后返回；前端使用 elementUI 中el
el-select 远程分页搜索（可搜关键字）
NancyFyn的博客
09-11 587
一脸懵，什么情况，数据也没有那么大，怎么会卡死呢？先看看这次改了什么，嗯~数据加解密，前端拿到所有数据并进行解密，额~数据加载时间好长~前端页面卡死了...
Vue2 + element ui el-select 远程搜索分页懒加载功能实现
weixin_59038724的博客
07-12 1719
1、 在 src 目录下 新建文件夹 directive / loadmore。4、 基于 el-select 封装 懒加载 远程搜索框。3、在main 文件中注册该指令。
elementUI下拉框分页加远程搜索组件封装
头发茂密的假程序猿
08-04 1164
<template> <el-select v-model="copyValue" :disabled="disabled" filterable clearable remote @clear="selectClear" placeholder="请选择" @change="updateValue"
layui第三方插件xm-select
07-24
而“xm-select”是layui生态中的一个第三方插件，专为实现下拉多选框功能而设计。在layui的项目中集成xm-select，可以极大地增强用户界面的交互性和功能多样性。 首先，我们来看“xm-select”的核心特性。它提供了...
select2包括js和css.zip
12-12
4. **可扩展性**：允许通过插件和API扩展功能，如远程数据加载、分页等。 5. **响应式设计**：适配不同屏幕尺寸，保证在移动设备上也能良好运行。 其次，Select2与Bootstrap的结合使用能进一步提升界面美观度。...
el-option下拉触底加载和远程搜索
pmywy的博客
05-30 674
el-option下拉触底加载和远程搜索
el-select 远程搜索+懒加载
jl____的博客
09-21 5513
使用Element-UI的下拉框功能，实现远程搜索和懒加载功能。
vue el-select下拉框，远程搜索+滚动触底加载
weixin_45901950的博客
06-30 1382
2、v-el-select-loadmore=“that” 封装的触底监听指令，that传给指令的this；3、“isLoad?‘selectLoad’ : ‘selectSucc’” 提示有数据还是已经加载完了。1、:remote-method=“remoteMethod” 远程搜索；控制加载中/没有更多样式。
【Vue】ElementUI el-select 下拉分页加载数据，并支持搜索功能（此处不支持分页）
星辰大海
01-05 6257
项目场景： 在公司管理后台需要有一个 根据选择客户筛选拥有的服务 的功能 问题描述： 但是有上千条用户数据，一次性查询加载会导致页面有很长时间（大概4~5s）的空白期，用户体验很不友好。 故需要进行优化，针对这个问题，网上解决方案也挺多的，此处参考 https://juejin.cn/post/6844903710972182536 解决方案，根据项目做了部分减配 解决方案： 一方面优化MySQL查询语句，另一方面前端分页查询数据。 本文主要讲述如何修改 ElementUI 的el-select 组件支持
vue+element实现分页及条件搜索功能(纯前端分页)
ll569421432的博客
03-09 9028
学习vue+element做用户条件分页查询遇到的坑 html页面主要代码： ps：(table :data 直接使用 list整个对象赋值，纯前端分页功能实现) <div id="user"> 1. <el-table :data="userInfo.slice((currentPage-1)*pageSize,currentPage*pageSize)" ...
element的el-select组件数据过多使用分页
weixin_41549971的博客
01-17 2387
element的el-select组件数据过多使用分页
h5select动态加载数据_tinySelect-带搜索过滤和ajax加载功能的select下拉框插件
weixin_39582708的博客
12-19 340
tinySelect.js是一款支持选项搜索过滤和Ajax远程加载的select下拉选择框jQuery插件。该下拉选择框插件可以搜索相关选项，可以通过Ajax调用json数据来填充下拉框，并且它支持中文，非常实用。使用方法HTML结构该下面来看可以实用静态的选项数据，HTML结构为普通的select下拉框结构：option aoption boption coption doption eopti...
el-select实现远程搜索和懒加载
HHKJ 的博客
03-18 3476
/ 自定义指令// 下拉框对象// 给下拉框增加滚动监听，// scrollHeight:当前所有选项的高度// scrollTop:滚动的距离// clientHeight:下拉框的高度// 当滚动条滚动到最底下的时候执行接口加载下一页});},自定义指令是所有懒加载可以公用，上面的代码可以直接复制，也意味着可以把以上代码封装为一个js 文件然后全局加载。
使用Hibernate+Struts2+Spring实现分页查询的示例
"分页实例教程使用Hibernate、Struts2和Spring框架实现" 在这个教程中，我们将探讨如何在Java Web开发中结合使用Hibernate、Struts2和Spring框架来实现高效的分页功能。分页是Web应用中常见的需求，它能够帮助用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值