Vue3 + ts+ elementUi 实现后台数据渲染到下拉框选项中,滑动加载更多数据效果

前言

功能需求:下拉框中分页加载后端接口返回的人员数据,实现滑动加载更多数据效果,并且可以手动搜索定位数据,此项目使用Vue3 + ts+ elementUi 实现

实现

把此分页滑动加载数据功能封装成vue中的hooks,文件命名为useMoreUser.ts

import {ref,reactive,nextTick} from 'vue'export  const useMoreUser = () => {const selectMoreData = reactive({page: 0, //当前页loading: false, //loadinghasMore: true, //判断是否还有更多数据selectValue: '', //下拉框选中数据selectOptions: [] //下拉框选项})// 人员列表加载数据列表【newPage: 页数,name: 搜索条件】const loadDataList = async (newPage: number, name?: string = '' ) => {try {selectMoreData.loading = true;//后端接口,入参为搜索条件人员姓名,页数let res = await getUserList(name, newPage); if (newPage === 1) { //初始化selectMoreData.selectOptions = [];}//存储后端接口返回数据selectMoreData.selectOptions.push(...res.rows);//判断是否还有更多数据selectMoreData.hasMore = selectMoreData.selectOptions.length < res.total;selectMoreData.page = newPage;} catch (err) {console.error(err);} finally {selectMoreData.loading = false;}};//加载更多数据const handleLoadMore = async (newPage: number,  name?: string = '' ) => {await loadDataList(newPage,name);};//返回下拉框选项const getList = ()=>{return selectMoreData.selectOptions;}//导出数据方法等return {selectMoreData,getList, loadDataList, handleLoadMore}
}

再继续封装下拉框选项组件 option.vue

<!-- 监听 el-select 的滚动,并提供触底加载数据的回调 -->
<template><el-option ref="el" class="el-select-loading" value=""><template v-if="hasMore"><el-icon class="el-select-loading__icon"><Loading /></el-icon><span class="el-select-loading__tips">{{ loadingText || "正在加载" }}</span></template><template v-else>{{ noMoreText || "到底了~" }}</template></el-option>
</template><script setup lang="ts">import { onMounted, onUnmounted, ref } from "vue";import { ElOption } from "element-plus";interface Props {// 当前页码page: number;// 是否加载中,用来过滤重复的加载loading: boolean;// 加载中的提示文案loadingText?: string;// 是否有更多数据可加载hasMore: boolean;// 没有更多数据的提示文案noMoreText?: string;}const props = defineProps<Props>();interface Emits {(event: "loadMore", data: number): any;}const emit = defineEmits<Emits>();const el = ref<typeof ElOption>();const observer = ref<IntersectionObserver>();// 组件加载成功,监听滚动onMounted(() => {if (!el.value) {return;}const callback: IntersectionObserverCallback = (entries) => {if (props.loading || !props.hasMore || !entries[0].isIntersecting) {return;}emit("loadMore", props.page + 1);};const options: IntersectionObserverInit = {root: el.value.$el.parentElement?.parentElement,rootMargin: "0px 0px 0px 0px",};observer.value = new IntersectionObserver(callback, options);observer.value.observe(el.value.$el);});// 组件卸载成功,取消滚动监听onUnmounted(() => {if (!el.value) {return;}observer.value?.unobserve(el.value.$el);});
</script><style lang="scss" scoped>.el-select-loading {display: flex;align-items: center;justify-content: center;cursor: initial;pointer-events: none;color: var(--el-color-info);font-size: 12px;&__icon {font-size: 16px;animation: rotate 1.5s linear infinite;}&__tips {margin-left: 6px;}@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}}
</style>

最后到咱们真正使用页面index.vue,封装时候有些费事,但是使用起来就简单了
template部分

 <el-select class="customSelect" filterable remote :remote-method="remoteMethod"v-model="user" placeholder="请选择人员"style="width: 100%"><el-optionv-for="item in selectMoreData.selectOptions":key="item.userId":label="`${item.userName}`":value="item.userId"><span style="float: left">{{ `${item.userName}` }</span></el-option><ElSelectLoading:page="selectMoreData.page":loading="selectMoreData.loading":hasMore="selectMoreData.hasMore"@loadMore="handleLoadMore"/></el-select>

script部分

<script lang="ts" setup>
import {ref, reactive, onUnmounted, onMounted, nextTick, computed, watch} from 'vue'
import ElSelectLoading from "@/components/Option/option.vue";
import {useMoreUser} from '@/hooks/useMoreUser.ts'
const {selectMoreData, loadDataList, handleLoadMore} = useMoreUser();const user = ref('');
const remoteMethod = (query: string) => {loadDataList(1, query);
}
</script>

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

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

相关文章

C++ | 继承和多态

目录 继承 继承的概念及用法 继承的作用域 向上转型和向下转型 继承过程中的默认生成函数 菱形继承及其解决方案 - 虚继承 虚继承的原理 - 虚基类表 继承和组合 多态 虚函数 多态的定义及使用 纯虚函数与抽象类 多态的原理 小点补充 虚表的位置 父类指针new一个…

django 批量 serializers listserializers

Django drf 序列化器 序列化器 扩展serializers的有用性是我们想要解决的问题。但是&#xff0c;这不是一个微不足道的问题&#xff0c;而是需要一些严肃的设计工作。— Russell Keith-Magee, Django用户组 序列化器允许把像查询集和模型实例这样的复杂数据转换为可以轻松渲染…

conda修改虚拟环境名称

conda 修改虚拟环境名称 conda 不能直接更改名称&#xff0c;但是可以通过克隆环境解决 新建环境&#xff08;克隆旧环境&#xff09; conda create --name 新环境名 --clone 旧环境名 删除原环境 conda remove --name 旧环境名 --all 查看现有环境 conda env list conda i…

Spring boot 整合grpc 运用

文章目录 GRPC基础概念&#xff1a;Protocol Buffers&#xff1a;proto 基础语法&#xff1a;调用类型&#xff1a; Spring boot 整合 grpc项目结构&#xff1a;整合代码&#xff1a;父 pomproto 模块服务端&#xff1a;客户端&#xff1a;实际调用&#xff1a; 原生集成 GRPC基…

Java 变量初始化的两种方式和优缺点比较

第一种初始化方式&#xff1a;&#xff08;优先推荐&#xff09; String fileRename null; File fileToSave null; 这种方式将变量的作用域限定在循环外部&#xff0c;即在整个代码块中都可以使用这些变量。初始值为null表示变量在开始时没有具体的数值。 这种方式更好的…

SDN和NFV笔记

目录 SDN SDN的引入 SDN的概念 SDN网络部署的方式 SDN架构 OpenFlow SDN与传统网络的区别 SDN的应用 SDN的优点 NFV NFV的概念&#xff1a; NFV的架构&#xff1a; NFV相比于传统物理网元&#xff1a; NFV与SDN的关系 NFV与SDN的相似点 NFV与SDN的不同 SDN SD…

CVE-2023-25194 Kafka JNDI 注入分析

Apache Kafka Clients Jndi Injection 漏洞描述 Apache Kafka 是一个分布式数据流处理平台&#xff0c;可以实时发布、订阅、存储和处理数据流。Kafka Connect 是一种用于在 kafka 和其他系统之间可扩展、可靠的流式传输数据的工具。攻击者可以利用基于 SASL JAAS 配置和 SASL …

Linux常用命令:find、grep、vim、cat、less、more

目录 我的常用搜索命令 find 命令 grep 命令 vim 常用命令&#xff1a; 1.光标移动命令 2插入命令 3.删除命令 4.复制和粘贴命令 5.撤销和重做命令 6.查找和替换命令 7.文件操作命令 8.其他命令 cat命令 less 命令 more 命令 less和more命令的区别 less和vim命…

前端设计模式之【单例模式】

文章目录 前言介绍实现单例模式优缺点&#xff1f;后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;前端设计模式 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出…

计算机毕业设计 基于Web的视频及游戏管理平台的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

低于1.5kg轻薄笔记本不完全汇总(2023年11月)

本文对一些轻薄笔记本&#xff08; < 1.5kg &#xff09;的基本信息进行了汇总&#xff0c;仅供参考。其中“容量”列只记录了该机型的一种配置&#xff0c;不代表该机型只有这种配置。“屏幕”列中&#xff0c;除特殊说明外&#xff0c;OLED一般为镜面屏&#xff0c;IPS和L…

OSG交互:选中场景模型并高亮显示

1、目的 可以在osg视图中选中指定模型实体,并高亮显示。共分为两种,一种鼠标点选,一种框选。 2、鼠标点选 2.1 功能说明 生成两组对象,一组cow对象可以被选中,另一组robot不能被选中;点击cow对象被选中高亮,点击robot被选中不高亮;点击空白处,弹出“select nothing!…

【Git】Git的GUI图形化工具ssh协议IDEA集成Git

一、GIT的GUI图形化工具 1、介绍 Git自带的GUI工具&#xff0c;主界面中各个按钮的意思基本与界面文字一致&#xff0c;与git的命令差别不大。在了解自己所做的操作情况下&#xff0c;各个功能点开看下就知道是怎么操作的。即使不了解&#xff0c;只要不做push操作&#xff0c;…

Java,多线程,线程的两种创建方式

首先是多线程的一些相关概念&#xff1a; 相关概念&#xff1a; 程序&#xff08;program&#xff09;&#xff1a;为完成特定任务&#xff0c;用某种语言编写的一组指令的集合。即指一段静态&#xff08;指不在执行中&#xff09;的代码。 进程&#xff08;process&#xf…

MATLAB算法实战应用案例精讲-【目标检测】机器视觉-工业相机参数

目录 前言 知识储备 相机镜头工作原理 算法原理 相机模型 坐标系

中国电信终端产业联盟5G Inside行业子联盟正式成立!宏电股份作为副理事单位受邀加入

11月9日&#xff0c;中国电信于广州召开“2023中国电信终端生态合作暨中国电信终端产业联盟&#xff08;以下简称CTTA&#xff09;第十四次会员大会”&#xff0c;联盟成员齐聚现场。作为CTTA大会的一个重要环节&#xff0c;中国电信终端产业联盟5G Inside行业子联盟正式成立&a…

C# .NET6 Log4net输出日志

在 C# .NET6 开发中&#xff0c;log4net 是一个常用的日志记录框架&#xff0c;它可以帮助我们方便地输出日志信息。本教程将向你展示如何在 C# .NET6 中实现 log4net 的日志输出功能。 整体流程 下面是实现“C# .NET6 log4net 输出日志”的整体流程&#xff0c;我们将通过以下…

[PyTorch][chapter 61][强化学习-免模型学习 off-policy]

前言&#xff1a; 蒙特卡罗的学习基本流程&#xff1a; Policy Evaluation : 生成动作-状态轨迹,完成价值函数的估计。 Policy Improvement: 通过价值函数估计来优化policy。 同策略&#xff08;one-policy&#xff09;&#xff1a;产生 采样轨迹的策略 和要改…

美国材料与试验协会ASTM发布新版玩具安全标准 ASTM F963-23

美国材料与试验协会ASTM发布新版玩具安全标准 ASTM F963-23 2023年10月13日&#xff0c;美国材料与试验协会&#xff08;ASTM&#xff09;发布了新版玩具安全标准ASTM F963-23 ​根据CPSIA的规定&#xff0c;当ASTM将ASTM F963的拟定修订意见通知CPSC时&#xff0c;若CPSC认为…

实战leetcode(二)

Practice makes perfect&#xff01; 实战一&#xff1a; 这里我们运用快慢指针的思想&#xff0c;我们的slow和fast都指向第一个节点&#xff0c;我们的快指针一次走两步&#xff0c;慢指针一次走一步&#xff0c;当我们的fast指针走到尾的时候&#xff0c;我们的慢指针正好…