vue使用element ui实现下拉列表分页的功能!!!

简介: vue使用element ui实现下拉列表分页的功能!!!

前几天做了个功能,需求是使用利用element ui如何给下拉列表分页,经过网上查找,自己摸索,已经完成,今天来记录一下吧。

实现的效果

image-20211103160459223

当时因为下拉框中的数据过多,所以想到使用分页的方式来实现。

现在来看看具体的实现吧。

准备分页的组件

分页组件的代码是从网上拼凑的,代码如下:

<template>
  <el-select v-model="childSelectedValue"
             :filterable="remote"
             multiple
             :loading="loading"
             :remote="remote"
             :size="size"
             :remote-method="remoteMethod"
             :clearable="clearable"
             @change="handleChange"
             @clear="handleClear"
             @focus="handleFocus"
             :style="{width: '93%'}"
             :placeholder="placeholder">
    <el-option
      v-for="item in optionSource"
      :key="item[valueKey]"
      :label="item[labelKey]"
      :value="item[valueKey]">
    </el-option>
    <el-pagination
      small
      layout="prev, pager, next"
      @current-change="changeNumber"
      :hide-on-single-page="true"
      :page-size="paginationOption.pageSize"
      :current-page="paginationOption.currentPage"
      :pager-count="paginationOption.pagerCount"
      :total="paginationOption.total">
    </el-pagination>
  </el-select>
</template>
<script>
export default {
  name: 'PaginationSelect',
  props: {
    //此参数只是为了父组件实现 v-model指令接受参数用,子组件中无实际意义
    // 在子组件中通过监听childSelectedValue值,来触发 input 事件,实现子父组件数据绑定
    value:{
      type:String,
      default: ''
    },
    valueKey:{//传入的option数组中,要作为最终选择项的键值名称
      type:String
    },
    labelKey:{//传入的option数组中,要作为显示项的键值名称
      type:String
    },
    clearable :{//是否支持清除,默认支持
      type:Boolean,
      default:true
    },
    remote:{//是否支持远程搜索,默认支持
      type:Boolean,
      default:false
    },
    size:{//组件尺寸,配置项同select  String | medium/small/mini
      type:String,
      default:'medium'
    },
    loading:{//远程数据加载状态显示
      type:Boolean,
      default:false
    },
    placeholder :{
      type:String,
      default:'给谁用'
    },
    optionSource:{//下拉框组件数据源
      type:Array,
      required:true
    },
    paginationOption:{//分页配置项
      type:Object,
      default:function () {
        return {
          pageSize:5,//每页显示条数  6条刚好
          currentPage:1,//当前页
          pagerCount:5,//按钮数,超过时会折叠
          total:10 //总条数
        }
      }
    }
  },
  data () {
    return {
      childSelectedValue:this.value,
    }
  },
  watch:{
    //监听子组件中选择的值得变化,每当选择一个项后,触发input事件,
    // 将子组件中选择的值通过input事件传递给父组件,实现父组件中v-model绑定的值的双向绑定
    childSelectedValue(val){
      this.$emit("input",val);
    },
    value(val){
      if(val!=null && val.length<1){
        this.childSelectedValue = '';
      }
    }
  },
  mounted(){
  },
  methods:{
    //子组件分页器,页码选择事件,父组件中监听子组件的 pageNationChange 事件,获取当前页码
    changeNumber(val){
      //此处的val是页码
      this.$emit("pageNationChange",val);
    },
    // 远程调用方法,在父组件中实现远程方法
    remoteMethod(val){
      if(val!=null && val.length>0){
        //只有输入的字符串长度大于1时,触发
        this.$emit("remote-method",val);
      }else{
        this.childSelectedValue = ' '
      }
    },
    //使组件支持change事件
    handleChange(val){
      this.$emit("change",val);
    },
    //使组件支持clear事件
    handleClear(val){
      this.$emit("clear",val);
    },
    //解决远程搜索无结果时,显示清除按钮问题
    handleFocus(){
      if(this.childSelectedValue.length<1){
        this.childSelectedValue = ''
      }
    }
  }
}
</script>
<style scoped>
</style>

关键代码都有注释,所以这里就不过多解释。直接放到项目中即可使用,下面再来看看怎么使用。

父组件的写法

父组件中的代码,网上不全,基本上都是自己整理的,首先在需要写下拉列表的地方写:

<!--添加人员 -->
        <el-form-item label="选择人员"  >
          <pagination-select
            @pageNationChange="pageNationChange"
            @change="getAthIdsAdd"
            :optionSource="athListAllByLocal"
            v-model="fanganform.pbeizhu"
            labelKey="aname"
            valueKey="id"
            :paginationOption="setSelectPage"
          >
          </pagination-select>
        </el-form-item>

pageNationChange为下拉列表分页的点击事件,执行的方法如下:

//下拉列表分页的点击的事件
    pageNationChange(val){
      //设置当前页为点击的页
      this.setSelectPage.currentPage = val;
      //重新调用分页查询的方法
      this.getAthListLocal(this.setSelectPage);
    },

change为下拉列表选项的改变事件,执行方法如下:

//获取下拉框中的运动员编号--保存方案
    getAthIdsAdd(val){
      var names = "";
      for(let i=0;i<=val.length-1;i++){
        this.athListAllPaged.find((item)=>{
          if(item.id === val[i]){
            names+=item.aname+",";
          }
        });
      }
      console.log(names);
      this.fanganform.ppersons = names;
    },

因为我需要把值和名称都存在数据库中,所以这里需要根据id来遍历一下name的值。

optionSource为下拉列表中的数据源。

paginationOption为分页的属性,代码如下:

//分页信息
      setSelectPage:{
        pageSize:6,//每页显示条数  3条刚好
        currentPage:1,//当前页
        pagerCount:5,//按钮数,超过时会折叠
        total:0 //总条数
      },

分页查询信息的代码如下:

//查询本地的运动员
    getAthListLocal(setSelectPage){
      getListAthPage(setSelectPage.currentPage,setSelectPage.pageSize).then(res => {
          const data = res.data.data;
          //下拉列表数据源绑定
          this.athListAllByLocal =data.records;
          //绑定总记录数
          this.setSelectPage.total = data.total;
          //
          if(this.athListAllPaged.length===0){
            this.athListAllPaged=data.records;
          }else {
            //追加数据
            for(let i = 0;i<data.records.length;i++){
              this.athListAllPaged.push(data.records[i]);
            }
          }
        });
    },

如果需要更改分页的的按钮数和页大小,可以直接修改setSelectPage中的pageSizepagerCount即可。

最后的效果就实现了。

image-20211103161711255

相关文章
|
3月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
320 12
|
3月前
|
存储 JavaScript 前端开发
element ui <el-date-picker> 设置展示当前月
在 Element UI 中,使用 `el-date-picker` 的 `value-format` 属性可将日期值格式化为指定字符串。设置 `type=&quot;month&quot;` 时,绑定值默认为 Date 对象,通过 `value-format=&quot;yyyy-MM&quot;` 可将其转为如 &quot;2023-05&quot; 格式,便于存储与处理。
776 0
|
10月前
|
流计算 UED
「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 简易购物车功能实现
本篇教程将带你实现一个简易购物车功能。通过使用接口定义商品结构,我们将创建一个动态购物车,支持商品的添加、移除以及实时总价计算。
298 69
「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 简易购物车功能实现
|
8月前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
476 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
11月前
「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现
本篇将带领你实现一个倒计时和提醒功能的应用,用户可以设置倒计时时间并开始计时。当倒计时结束时,应用会显示提醒。该项目涉及时间控制、状态管理和用户交互,是学习鸿蒙应用开发的绝佳实践项目。
364 2
「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现
|
12月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
873 0
|
5月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
166 15
|
5月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
152 11
|
16天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
137 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
4月前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
178 56

热门文章

最新文章