Vue下拉框加分页搜索功能的实现方法

目录
  • 方式一:使用elementui中的el-select和el-pagination实现分页
  • 方式二:使用v-selectpage组件实现分页搜索

前言:开发任务中有这样一个需求,下拉框中需要展示超过5000条数据,甚至更多。这数据量直接整个页面卡死了,就想到在下拉框中加分页,实现方式有如下两种:

方式一:使用elementui中的el-select和el-pagination实现分页

HTML部分:
    <el-select
      v-model="value1"
      placeholder="请选择数据"
      :clearable="false"
      style="width: 240px"
      size="mini"
      filterable
      :filter-method="filter"
    >
      <el-option
        v-for="item in optionfen"
        :key="item.value"
        :label="item.value"
        remote
        :value="item.label"
        placeholder="请输入"
      >
      </el-option>
      <div style="bottom: -10px">
        <el-pagination
          small
          @current-change="handleCurrentChange"
          :current-page="currentpage"
          :page-size="pageSize"
          layout="prev, pager,next,total"
          :total="options.length"
        >
        </el-pagination>
      </div>
    </el-select>

JS部分
export default {
  data() {
    return {
      options: [],  //总数据
      optionfen: [],  //当前页码的数据
      value1: "",  //输入框的值
      currentpage: 1,   //当前页码
      pageSize: 10,   //每页展示的条数
    };
  },
  methods: {
  //分页的实现,currentpage 为页码,每页展示的数据为10(可自行更改pageSize)条,分别是在总数据options中
  //下标从(currentpage -1)*10开始的十条数据
    handleCurrentChange(val) {
      this.optionfen = [];
      this.currentpage = val;
      let start = (val - 1) * this.pageSize;
      let end = Number(start) + Number(this.pageSize);
      //此处需要判断如果计算的结束下标大于总数据的长度,则需要修改结束下标
      if (end > this.options.length) {
        end = this.options.length;
      }
      for (let i = start; i < end; i++) {
      //将取到的数据展示在页面
        this.optionfen.push(this.options[i]);
      }
    },
};

方式二:使用v-selectpage组件实现分页搜索

v-selectpage官方文档地址:https://terryz.gitee.io/vue/#/selectpage/demo
步骤:
1.安装v-selectpage依赖

npm install v-selectpage@2.1.4 -save

2.在main.js中注册到Vue实例中

import vSelectPage from 'v-selectpage'
Vue.use(vSelectPage, {
   language: 'cn',
   placeholder: '请选择数据'
 })

3.在index.vue页面中使用

<v-selectpage :data="options" v-model="value" show-field="name" key-field="value"></v-selectpage>
//其他的属性参考官方文档

注意:v-selectpage不仅可以实现下拉框单选还可以实现多线、表格等功能点,具体的去官网查看

到此这篇关于Vue下拉框加分页搜索的文章就介绍到这了,更多相关vue下拉框分页内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

    官网的demo献上 在elementui Input输入框中可以找到远程搜索组件,获取服务端的数据 官网中的数据list都是写在loadAll()中的,而如果我们此时要用到mock的数据就要在此基础上对代码进行修改. -mock数据的获取- 我们要获取远程mock中所有学生的学号信息,根据输入的数据来远程查找目标,并且在选中该目标后能够自动填充对应的姓名.生日.手机等信息,实现快速获取信息的功能,再也不用手动一个个去输入所有的数据啦- 在template中添加el-autocomplete <e

  • 基于vue实现可搜索下拉框定制组件

    实践加深对vue的理解和运用有效途径,本文是基于vue的可搜索下拉框定制组件实现,在此记录. 一.效果 二.组件代码 dropdown.vue <template> <div class="vue-dropdown default-theme" v-show-extend="show"> <div class="search-module clearfix" v-show="length">

  • Vue 级联下拉框的设计与实现

    目录 1.数据库设计 2.前端页面 3.一个完整的demo ​ 在前端开发中,级联选择框是经常用到的,这样不仅可以增加用户输入的友好性,还能减少前后端交互的数据量.本文以elementUI为例,使用其余UI组件大致思想也都相同. 1.数据库设计 ​ 所有的相关数据皆可存在一张表中,这样数据就可以不受层级的限制. ​ 表结构可以参考如下建表SQL: CREATE TABLE `supplies_type` ( `id` int(11) NOT NULL AUTO_INCREMENT, `categ

  • vue组件实践之可搜索下拉框功能

    之前也写过这个小组件,最近遇到select下加搜索的功能,所以稍微完善一下. 效果图: 子组件 DROPDOWN.VUE <template> <div class="vue-dropdown default-theme"> <div class="cur-name" :class="isShow ? 'show':''" @click="isShow =! isShow">{{itemli

  • vue组件实现可搜索下拉框扩展

    本文实例为大家分享了vue组件实现可搜索下拉框的具体代码,供大家参考,具体内容如下 一.效果 二.代码 dropdown-ext.vue <template> <div class="vue-dropdown-ext" :class="themestyle" v-show-extend="show"> <div class="search-module clearfix" v-show="

  • vue实现下拉框二级联动效果的实例代码

    1.实现效果 2.后端返回的数据格式 "list": [ { "id": "1178214681118568449", "title": "后端开发", "children": [ { "id": "1178214681139539969", "title": "Java" }, { "id&quo

  • Vue下拉框加分页搜索功能的实现方法

    目录 方式一:使用elementui中的el-select和el-pagination实现分页 方式二:使用v-selectpage组件实现分页搜索 前言:开发任务中有这样一个需求,下拉框中需要展示超过5000条数据,甚至更多.这数据量直接整个页面卡死了,就想到在下拉框中加分页,实现方式有如下两种: 方式一:使用elementui中的el-select和el-pagination实现分页 HTML部分: <el-select v-model="value1" placeholde

  • Vue下拉框双向联动效果的示例代码

    一.前言 在开发前端页面的时候,常常需要写下拉框,普通常见的下拉框有在页面写死固定值的下拉框,有通过调用后台接口服务而获取的值列表等.无论是原始的jsp页面html页面等,还是现在流行的vue angluar.js等,逻辑都是一样.本文讲解VUE页面中,多个下拉框如何实现双向联动效果. 二.代码示例 2.1 在vue页面的<el-form 表单里填充两个<el-col :span="12">选项,分别为选项A和选项B,如下所示: <el-col :span=&q

  • C# MVC 使用LayUI实现下拉框二级联动的功能

    一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3.layui.use就是一种加载模块的方式. 如下代码: //LayUI渲染以及启动模块 layui.use(['form', 'layedit', 'laydate'], function () { var form = layui.form,//获取form模块 layer = layui.la

  • 使用layui监听器监听select下拉框,事件绑定不成功的解决方法

    如下所示: 使用layui监听select所选的value 需要注意的是:form.on必须写在layui.use(){ }中 且使用layui动态添加option时,必须要进行渲染(form.render()),否则选项追加不上 这样做完之后如果还不能获取select所选的value,那就需要检查一下select所在的form表单有没有写class属性,如果没有写class属性,就监听不到select 如果在完成后台操作之后跳转页面时不显示样式了,就检查一下请求路径resultmapping后

  • SelecT下拉框选中和取值的解决方法

    Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项. 这个很好解决: 如下: <div class="page-header"> <div class="form-horizontal"> <div class="control-label col-lg-0"> </div> <div class="col-lg-2"> <

  • JavaScript实现向select下拉框中添加和删除元素的方法

    本文实例讲述了JavaScript实现向select下拉框中添加和删除元素的方法.分享给大家供大家参考,具体如下: 1.说明 a. 利用append()方法向下拉框中添加元素 b. 利用remove()方法移除下拉框中最后一个元素 2.实例源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

  • JavaScript实现单击下拉框选择直接跳转页面的方法

    本文实例讲述了JavaScript实现单击下拉框选择直接跳转页面的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/JavaScript"> <!-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

  • JS获取下拉框显示值和判断单选按钮的方法

    本文实例讲述了JS获取下拉框显示值和判断单选按钮的方法.分享给大家供大家参考.具体如下: 1.本人做过很多项目,都需要得到select组件显示的值.下面是我经常用到的方法: Html源码如下: <html><body> <select id="province" name="province" > <option value="1">北京</option> <option valu

  • Vue下拉框回显并默认选中随机问题

    今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了, 但是这个问题还是存在的,后来发现问题是 回显中的数据是两次请求,因为网络问题两次说不定哪个就请求的快一些, 因为调用的对象不一样,所以可能会不同,改为相同的之后,发现第一次请求的时间始终比第二次时间短一些,达到想要的效果 总结: 1.因为第一次加载下拉框列表的时候,请求列表中所有数据和列表默认回显数据不同,所以会出现被刷新,而出现回显随机问题,,, PS:vue 运用ElementUI,做select下拉框回

  • 使用bootstrap实现下拉框搜索功能的实例讲解

    背景 公司的小二后台有一个下拉框选择经销商的功能,由于选择的经销商过多,因此添加搜索功能. 前提 配置好Bootstrap相关的开发环境 主要内容 <div class="form-group"> <label class="col-sm-3 control-label" for="state">经销商信息</label> <div class="col-sm-3"> <s

随机推荐