记一次elementui时间线的实现

实现效果

点击展开,每次累加五条数据进行展示

image.png

实现思路

  1. 起始本质上就是一个分页查询,只不过按新的形式展示,然后也不统计总数,每次只展示固定的5条数据
  2. 点击加载更多,就展示下一页,页的页数进行+1,请求后端接口获取下一页数据
  3. 获取到的新数据,通过与原数据集合找一个唯一维度比如ID,进行对比,不存在于原数据集中的,进行添加
  4. 还有一些小优化,比如数据为0时,以及最后一页时就不展示显示更多

具体代码

时间线自定义组件

<template><div style="display: flex; justify-content: center;"><el-timeline style="max-width: 600px"><el-timeline-item v-for="item in eventLogTableData" :timestamp="item.occurredAt" placement="top"><el-card><h4>{{ item.channelName }}</h4><p>{{ item.actionDesc }}</p></el-card></el-timeline-item></el-timeline></div><div style="display: flex; justify-content: center;" v-if="eventLogTableData.length >0"><el-button link type="primary" :icon="ArrowDownBold" @click="loadMore">加载更多</el-button></div><el-empty description="暂无数据" v-else/></template><script>
import {h,onUnmounted,computed,watch,onMounted,toRefs,reactive,ref,
} from "vue";
import {ArrowDownBold} from "@element-plus/icons-vue";
import {useStore} from "vuex";export default {components: {},props: {getDataSource: Function,},setup: function (props, context) {const store = useStore();const eventLogTableData = computed(() => store.state.member.eventLogTableData);const eventLogPageSize = computed(() => store.state.member.eventLogPageSize);const eventLogCurPage = computed(() => store.state.member.eventLogCurPage);onUnmounted(() => {store.commit("member/SET_EVENT_LOG_TABLE_PAGE_SIZE", 5, {root: true});store.commit("member/SET_EVENT_LOG_TABLE_CUR_PAGE", 1, {root: true});store.commit("member/SET_EVENT_LOG_TABLE_LIST", []);});const loadMore = () => {store.commit("member/SET_EVENT_LOG_TABLE_CUR_PAGE", (eventLogCurPage.value + 1), {root: true});// 调用父组件传来的加载数据函数props.getDataSource();};return {loadMore,ArrowDownBold,eventLogTableData,eventLogPageSize,eventLogCurPage};}
}</script><style scoped lang="scss"></style>

全局状态管理

import requestHttp from "@/server/request";
import {ElMessage} from "element-plus";
import util from "@/utils/utils";
import apiConstants from "@/api/apiConstants";const state = {eventLogTableData: [],// 当前页eventLogCurPage: 1,// 页数量eventLogPageSize: 5,
};const mutations = {SET_EVENT_LOG_TABLE_LIST: (state, payload) => {state.eventLogTableData = payload || [];},SET_EVENT_LOG_TABLE_CUR_PAGE: (state, payload) => {state.eventLogCurPage = payload;},SET_EVENT_LOG_TABLE_PAGE_SIZE: (state, payload) => {state.eventLogPageSize = payload;},
};const actions = {async pageQueryMemberEventLog({commit}, params) {try {const result = await requestHttp({// 这里按情况写自己的url: apiConstants.HOST_HOME_GET_MEMBER_EVENT_LOG_INFO,method: "POST",data: params,});if (result.data && result.data.code == 200) {let data = result.data?.data.list;let copiedArray = state.eventLogTableData.slice();let ids = copiedArray.map(item => item.id);// 这里将不存在于原数据的返回结果写入let canUseData = data.filter(item => !ids.includes(item.id));copiedArray.push(...canUseData);commit("SET_EVENT_LOG_TABLE_LIST", copiedArray);} else {ElMessage.warning(result.data.message);}} catch (e) {console.log(e);}},
};export default {namespaced: true,state,mutations,actions,
};

父组件

<template>
<MemberEventLogTimeLine :getDataSource="getMemberEventLogDataSource"></MemberEventLogTimeLine>
</template><script>
import MemberEventLogTimeLine from "views/member/MemberEventLogTimeLine.vue";
import {useStore} from "vuex";
// 分页查询事件
export default {components: {MemberEventLogTimeLine},props: {},setup: function (props, context) {const store = useStore();const memberId = computed(() => store.state.member.currentMemberId);const eventLogCurPage = computed(() => store.state.member.eventLogCurPage);const eventLogPageSize = computed(() => store.state.member.eventLogPageSize);const getMemberEventLogDataSource = () => {const params = {pageNum: eventLogCurPage?.value,pageSize: eventLogPageSize?.value,param: {memberId: memberId?.value}};store.dispatch("member/pageQueryMemberEventLog", params);}}
}
</script>

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

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

相关文章

ONLYOFFICE 文档 8.1 发布:重塑文档处理

官网链接&#xff1a;ONLYOFFICE官网 一、PDF编辑器功能强大&#xff1a;创造跟随想象 在追求无界办公与高效创作的今天&#xff0c;ONLYOFFICE再次引领风潮&#xff0c;正式发布了其桌面编辑器的最新版本——ONLYOFFICE桌面编辑器8.1。这一版本不仅巩固了其作为顶级办公套件…

python3使用ast.parse详解

使用ast库分析python3脚本, 并对脚本进行一些处理, 比如注释pirnt语句 一.基础知识 官方网址连接 ast — Abstract Syntax Trees ast库可以方便的分析python代码结构, 并做一些处理, 很适合对大量脚本文件做批量处理, 比如把print语句全部注释等. 直观的打印出代码结构 impo…

Python中令人困惑的模块导入

Python中令人困惑的模块导入 一句话总结: 绝对路径保平安 相关文件见此 问题描述 我在过去很长一段使用Python的时间里, 都仅限于一些简单模块, 文件结构也都很简单, 文件嵌套不会超过2层, 所以即便在模块导入上碰到些Module Not Found的问题, 也都是出问题那会儿去网上搜下方…

itextpdf-PdfStamper写入文件流到ByteArrayOutputStream注意事项

itextpdf-PdfStamper写入文件流到ByteArrayOutputStream注意事项 1、前情提要 最近做项目时有个需求&#xff0c;把图片合成pdf并且加水印&#xff0c;然后通过base64返回到前端。本来想的很简单&#xff0c;使用PdfStamper&#xff0c;把参数FileOutputSteam换成ByteArrayOutp…

简述Java项目中VO,BO,PO,DO,DTO之类的文件概念、易混点

VO&#xff0c;BO&#xff0c;PO&#xff0c;DO&#xff0c;DTO 概念易混点一&#xff1a;VO和DTO- 让我们通过一个实例来阐释DTO和VO的概念及其应用差异&#xff1a;小结&#xff1a;VO专注于展示&#xff0c;而DTO则用于数据的传输和业务逻辑的处理。 二&#xff1a;BO和PO小…

公益培训|半导体与集成电路项目制培训项目

关于我们 硬蛋产业学院&#xff0c;基于硬蛋创新(http://00400.HK)在芯片产业的资源和技术优势&#xff0c;引进全球领先的芯片应用技术&#xff0c;为国内培养芯片应用技术人才&#xff0c;助力芯片应用产业发展。 硬蛋产业学院在国家各主管部门、广东省、深圳市及社会各界的大…

AI 激发算力需求暴增,施耐德电气解码智算中心发展

随着全球碳达峰目标的持续推进&#xff0c;各行各业都在加速绿色转型的步伐&#xff0c;尤其是高耗能产业更是备受关注。人工智能行业以其迅猛的发展速度令人瞩目&#xff0c;它所带来的不仅是算力需求的飙升&#xff0c;更是日益凸显的能耗问题。 目前&#xff0c;人工智能预…

AVI 是什么格式,AVI 格式用什么播放器打开?

AVI 是什么格式&#xff1f;提到 AVI 格式想必大家多数会想到在 DVD 横行的年代&#xff0c;光盘中所包含的媒体视频格式多是以 AVI 格式存储。AVI 是一个非常通用的容器格式&#xff0c;支持多种视频和音频编解码器。这意味着从DVD中提取视频内容时&#xff0c;可以通过转码为…

发电机保护屏产品介绍,组成

发电机保护屏产品介绍&#xff0c;组成 发电机保护屏是用于保护发电机组的电气装置。它根据发电机的类型和实际运行要求&#xff0c;将多种保护装置组合在一起&#xff0c;形成一个保护屏柜。发电机保护测控屏是指把发电机类保护装置集中在安装在一个控制柜里&#xff0c;主要用…

Java程序递归及mybatis递归查询

之前项目组有个需求&#xff0c;定时同步机构的信息。已知三方接口由于返回数据量很大&#xff0c;所以最后需要三方提供一个可根据机构编号获取当前机构及子机构信息的接口。而不是一次性返回全部机构信息&#xff01; 由于这次需求也用到了递归&#xff0c;所以记录下&#…

Python自动化操作:简单、有趣、高效!解放你的工作流程!

今天跟大家分享一套自动化操作流程解决方案&#xff0c;基于Python语言&#xff0c;涉及pyautogui、pyperclip、pythoncom、win32com依赖包。安装命令为&#xff1a; pip install pyautoguipip install pyperclippip install pythoncompip install win32compyautogui 是一个自…

【python入门】循环语句

文章目录 1. for 循环2. while 循环3. break 和 continue 语句4. else 子句5. 循环控制语句6. 列表推导式7. 循环中的异常处理8. 循环的高级用法 1. for 循环 for 循环通常用于遍历序列&#xff08;如列表、元组、字典、集合、字符串&#xff09;或者迭代器。for 循环可以自动…

病理性不对称引导的渐进学习用于急性缺血性脑卒中梗死分割| 文献速递-先进深度学习疾病诊断

Title 题目 Pathological Asymmetry-Guided Progressive Learning for Acute Ischemic Stroke Infarct Segmentation 病理性不对称引导的渐进学习用于急性缺血性脑卒中梗死分割 01 文献速递介绍 中风已经成为第二大致命疾病&#xff0c;大约70%的中风是缺血性的。众所周知…

Kafka官方提供的RoundRobinPartitioner出现奇偶数据不均匀

Kafka官方提供的RoundRobinPartitioner出现奇偶数据不均匀 参考&#xff1a; https://www.cnblogs.com/cbc-onne/p/18140043 使用RoundRobinPartitioner /** Licensed to the Apache Software Foundation (ASF) under one or more* contributor license agreements. See the…

如何提高网页加载速度?

如何以闪电般的速度加载网站&#xff1f; 看看这 8 个提升前端性能的技巧&#xff1a; 01 压缩 在传输之前压缩文件可以减少其大小&#xff0c;减少需要传输的数据量&#xff0c;从而加快加载时间。 实现方法&#xff1a; Gzip/Brotli 压缩: 配置你的 web 服务器&#xff08…

[Linux] 历史根源

UNIX系统&#xff1a; 1969年&#xff0c;由贝尔实验室的K.Thompson和D.M.Ritchie为PDP-7机器编写的一个分时操作系统&#xff0c; 最初使用汇编语言编写&#xff0c; 后来1972年C语言出世以后&#xff0c;二人由使用C写了UNIX3&#xff0c; 此后UNIX大为流行开来 UNIX流派树&a…

一个简单的盐值md5破解

声明&#xff0c;仅供学习&#xff0c;请勿用于非法用途&#xff01; 首先需要获取到salt值和密文&#xff0c;自己有字典 我是做vulhub的cmsms复现的时候&#xff0c;用他的poc跑出来密文和盐值&#xff0c;发现这个是做了字段拼接再加密&#xff0c;也就是加盐了&#xff0c…

华为交换机的堆叠-Stack配置(基于业务口普通线缆的堆叠配置)

不想看原理请跳过一、二、三、四&#xff0c; 直接到配置五&#xff0c;干完活有时间在慢慢看原理。 一、什么是堆叠-Stack 指将多台交换机通过堆叠线缆连接在一起&#xff0c;逻辑上变成一台交换设备&#xff0c;作为一个整体参与数据转发。即&#xff1a;1 1 一 二、堆叠…

ChatGPT 宣布终止对中国提供 API 服务? 来用国产大模型吧

国产大模型 阿里云 将为 OpenAI API 用户提供更具性价比的中国大模型替代方案&#xff0c;同时宣布中国开发者提供 2200 万免费 tokens 和专属迁移服务 硅基流动 SiliconCloud 免费开放 7 款大模型 智谱 AI 正式推出 OpenAI API 用户特别搬家计划&#xff0c;同时还会为开…

如何通过待办工具提升个人效率 减轻压力提升效率的待办app

在快节奏的现代社会中&#xff0c;工作任务繁重&#xff0c;人们的压力日益增大。为了减轻压力并提升工作效率&#xff0c;我们急需找到一种有效的方法来管理日常任务。幸运的是&#xff0c;随着科技的进步&#xff0c;各种新兴工具应运而生&#xff0c;为我们提供了便捷的解决…