vue3项目 使用 element-plus 中 el-collapse 折叠面板

最近接触拉了一个项目,使用到 element-plus 中 el-collapse 折叠面板,发现在使用中利用高官网多多少少的会出现问题。
(1.直接默认一个展开值,发现时显时不显
2 . 数据渲染问题,接口请求了,页面数据不更新
3 样式问题,自定义表头title等等)
我们的数据结构是双数组,如果你和我一样直接copy, 如果是一个对象数组或者数组吧,只需把外层的数组转化即可
在这里插入图片描述

效果图 : 当点击 了查看按钮时,弹框出现,且默认展开第一个数据,且每次的展开或者收起都有对应的样式,可见下图左侧的图样,
我这里还用到了 el-steps ,最外层的 是自己写的样式,因为我一个页面中使用了两次el-steps ,发现样式会有干扰。所以我在最外层的el-steps是自己写的div标签。

注意 的是我们使用 官网说明的 const activeName = ref([]) 数组类型 ,且里面的值使用字符串类型。
当 弹框出现时,调用接口进行处理赋值 activeName,并转成 toString() 字符串,然后默认展开第一项activeName.value.push(index.toString())activeName.value = ['0']在进行处理每个item之间的高和选中样式。最后在处理点击@change 的事件// 处理在展开折叠状态const handleCollapseChange = (val: any) => {// console.log(val, 'val');PurchaseInfo.forEach((item:any, index:any)=>{if(val){if(val === index.toString()){item.flagActive = trueitem.height = myCollapseRef.value.$el.clientHeight + 20} else{item.flagActive = falseitem.height = 38}}else{item.flagActive = falseitem.height = 38}})// console.log(PurchaseInfo, 'PurchaseInfo')}

在这里插入图片描述
上代码了。

<ProcessViewDialogv-model:value="dialogFormVisible":projectDeviceId="projectDeviceId"
/>

自己 引入组件

<template><div><zmjDialogv-model="show"width="460"@opened="init"title="查看所有设备"center> <div style="display:flex; width: 460px"><div class="el-dialog-div"><div class="el-dialog_divleft"><div class=divleftlast v-for="(el, index) in PurchaseInfo" :key="index"><p :class="el.flagActive ? 'arrdata1Active' : 'arrdata1'"></p><p :style="{width: 2 + 'px', height: el.height + 'px', background: '#E8F0FF', borderRadius: '0px 0px 0px 0px', marginLeft: '8px'}"></p></div></div><el-collapseclass="el-collapse-parent"v-model="activeName"accordion@change="handleCollapseChange"ref="myCollapseRef"><el-collapse-itemv-for="(item, index) in PurchaseInfo":key="index":name="index.toString()"style="margin-bottom: 10px;"ref="itemHeight"><template #title><div :class="item.flagActive ? 'headerRightTrue' : 'headerRightFlase'"><span class="spanFalse"></span><div class="itemApproveTimeFalse">{{ item.approveTime }}</div><div class="top-right"><div> {{item.operatorName}} <span v-if="item?.nodeId"> ({{item?.nodeId == 120 ? '方案' : ( item?.nodeId == 130 ? '商务活动' : (item?.nodeId == 140 ? '配套' : '' ))}}) </span> </div><span :class="item.flagActive ? 'headerRightspan1' : 'headerRightspan2'">{{ activeName.includes(index.toString()) ? '收起' : '展开' }}</span></div></div></template><div class="contntDiv"><div class="contntDiv-1"><div class="contntDiv-1"><span class="contntDiv-1-span"> {{item.model}} </span><span class="contntDiv-2-span"> {{ item?.supportLabel === 1 ? '标准架型' : (item?.supportLabel === 3 ? '模块架型' : '非标架型')}} </span></div><div class="contntDiv-1-d"> {{ item?.deviceCount}}架 </div></div><div class="line"></div><div><div class="contntDiv-item-left"> 片区 </div><div class="contntDiv-item-right"> {{ item?.areaName }} </div></div><div><div class="contntDiv-item-left"> 支架类型 </div><div class="contntDiv-item-right"> {{ GET_SUPPORT_TYPE(item?.firstDeviceType) }} - {{ GET_SUPPORT_SECOND_TYPE_NAME(item?.secondDeviceType) }}</div></div><div><div class="contntDiv-item-left"> 图号 </div><div class="contntDiv-item-right"> {{item?.standardGroupNo }} </div></div><div><div class="contntDiv-item-left"> 单架重量 </div><div class="contntDiv-item-right"> {{ item?.singleWeight}}吨 </div></div> <div><div class="contntDiv-item-left"> 支架特征代号 </div><div class="contntDiv-item-right"> {{ joinSupportFeatureModel }} </div></div><div class="contntDiv-item-right-bottom" v-if="item?.supportFeatureModel && item?.supportFeatureModel?.length > 0">*支架产品型号{{ item?.supportProductModel}}</div></div><div class="box-approve" v-if="item?.flowApproveDtoList?.length>0"><el-steps direction="vertical" :active="1" align-center><el-step v-for="(v, i) in item?.flowApproveDtoList" class="my-text" :key="i"><template #icon><div class="titleDiv"><div class="time">{{ v.updateTime }}</div></div></template><template #title><div class="step-icon"></div></template><template #description><div class="descriptionDiv"><div style="color: #707070; font-size: 14px"><span class="" style="color: #3076fe">{{ v.approveUserName }}</span><!-- approveType  1 提交 2 审批 status 1 未审批 2  审批通过 3 驳回 --><span v-if="v.approveType == 1 && v.status == 2 && isLastElement(item?.flowApproveDtoList, i)" style="color: rgba(0, 0, 0, 0.56)"><span style="color: #262626">提交审批</span></span><span v-else><span v-if="v.approveType == 1 && v.status == 2" style="color: rgba(0, 0, 0, 0.56)"><span style="color: #262626">再次提交审批</span></span><span v-if="v.approveType == 1 && v.status == 3" style="color: rgba(0, 0, 0, 0.56)"><span style="color: #ffb236">审批驳回</span></span><span v-if="v.approveType == 2 && v.status == 2"><span style="color: #63af17">审批通过</span></span><span v-if="v.approveType == 2 && v.status == 3">将<span style="color: #ffb236">审批驳回</span></span></span></div><div v-if="(v.approveType == 1 || v.approveType == 2) && v.status == 3" class="reject-box"><div class="reject-item-1"><div>驳回原因</div><div>{{ v.rejectReason }}</div></div></div></div></template></el-step></el-steps></div></el-collapse-item></el-collapse></div></div><template #footer><div class="dialog-footer"><el-button @click="show = false">返回</el-button></div></template></zmjDialog></div>
</template><script setup lang="ts">
import { recordLog } from '@/api/project/device' // 接口替换为完成
import { GET_SUPPORT_TYPE, GET_SUPPORT_SECOND_TYPE_NAME } from './config'
const props = defineProps({dialogFormVisible: Boolean,value: Boolean,projectDeviceId: { type: Number, default: null }, // 业务id
})
// const activeName = ref()
const activeName = ref([])
const emit = defineEmits(['update:value', 'exit'])
// 添加页面弹出标识
let show = computed({get() {return props.value},set(val: any) {emit('update:value', val)}
})
let PurchaseInfo:any = reactive([])
let joinSupportFeatureModel:any = ref('')// 判断数组的最后一个
const isLastElement = (array:any, index:any) => {return index === array.length - 1
}const init = async () => {try {const res: any = await recordLog({ deviceId: props.projectDeviceId })PurchaseInfo = res.datalet arr:any = []activeName.value = []PurchaseInfo.forEach((item:any, index:any)=>{activeName.value.push(index.toString())activeName.value = ['0']if(index.toString() === activeName.value[0]){item.height = myCollapseRef.value.$el.clientHeight + 20item.flagActive = true}else{item.height = 38item.flagActive = false}item?.supportFeatureModel?.map((v:any)=>{if(v==='A1'){arr.push('A类支架')} else if(v ==='Q'){arr.push('大倾角')}else if(v ==='D'){arr.push('电液控')}else if(v ==='A'){arr.push('大侧帮支架左架')}else if(v ==='B'){arr.push('大侧帮支架右架')}else{arr = []}})})// console.log(PurchaseInfo, 'PurchaseInfo-loading---',)joinSupportFeatureModel.value = arr.join('、')} catch (err) {console.log(err.message)}
}let myCollapseRef = ref()
const itemHeight = ref(null)
// 监听折叠状态
const handleCollapseChange = (val: any) => {// console.log(val, 'val');PurchaseInfo.forEach((item:any, index:any)=>{if(val){if(val === index.toString()){item.flagActive = trueitem.height = myCollapseRef.value.$el.clientHeight + 20} else{item.flagActive = falseitem.height = 38}}else{item.flagActive = falseitem.height = 38}})// console.log(PurchaseInfo, 'PurchaseInfo')
}
</script><style lang="scss" scoped>
.el-dialog_divleft{width: 10px;// margin-left: 10px;margin-top:28px;display: flex;flex-wrap: wrap;height: 38px;
}
/* 选择最后一个div中的第二个p标签,并应用样式 */
.divleftlast:last-child p:last-child {display: none;
}
.arrdata1{width: 8px;height: 8px;border-radius: 50%;border: 1px solid #3076fe;// margin-top: 15px;margin-left: 5px;
}
.arrdata1Active{width: 8px;height: 8px;border-radius: 50%;border: 1px solid #3076fe;// margin-top: 15px;margin-left: 5px;background: #3076fe;
}
.el-dialog-div {// width: 395px;width: 100%;margin-left: 20px; // 20pxheight: 50vh;overflow-x: hidden;display: flex;
}.page-content {padding: 24px 44px;.device-group {&:not(:first-child) {margin-top: 12px;}}:deep(.el-descriptions.zmj-descriptions) {.el-descriptions__header {margin-top: 12px;margin-bottom: 8px;.el-descriptions__title {font-weight: 400;}}.el-descriptions__cell {padding: 10px 12px;color: #262626;}.el-descriptions__label {padding: 10px 12px;background-color: #fafafa;color: #707070;}}
}
.page-empty {height: 100%;
}
.color-centent {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #3076fe;
}
/* 如果您想要在展开的el-collapse-item上添加特殊样式,可以使用深度选择器 */
.el-collapse {:deep(.el-collapse-item__content) {border: 1px solid #3076FE;padding-bottom: 0px; /* 根据需要调整padding值 */width: 384px;}
}.el-collapse-parent{margin-top: 10px;border: none;width:395px;margin-left: 10px;:deep(.el-collapse-item__header){background: #3076FE;border-radius: 4px 4px 0px 0px;width: 384px;height: 39px}
}
:deep(.el-collapse-item__arrow){display:none;
}
.headerRightTrue{width: 395px;height: 38px;background: #3076FE;border-radius: 4px 4px 0px 0px;display: flex;justify-content: space-between;padding: 10px;color:#fff;font-size: 14px;line-height: 20px;top: -20px;.top-right{width: 160px;display: flex;// justify-content: space-around;justify-content: space-between;font-size: 12px;.headerRightspan1{color:#fff;}}
}
.spanFalse{width: 4px;height: 12px;background: #3076FE;border-radius: 0px 0px 0px 0px;margin-top: 4px;}.itemApproveTimeFalse{margin-left: -55px;}
.headerRightFlase{background: #F3F8FF;width: 395px;height: 38px;border-radius: 4px 4px 0px 0px;display: flex;justify-content: space-between;padding: 10px;color: #666666;font-size: 14px;line-height: 20px;top: -20px;border: 1px solid #3076FE;.top-right{width: 160px;display: flex;// justify-content: space-around;justify-content: space-between;font-size: 12px;.headerRightspan2{color: #3076FE}}
}
.contntDiv{width: 355px;height: 200px;background: #F3F8FF;border-radius: 4px 4px 4px 4px;border: 1px solid #EEEEEE;padding: 10px;// margin: 14px;margin: 8px 14px;>div{display: flex;justify-content: space-between;margin-top: 5px;}.contntDiv-1-span{width: 116px;height: 20px;font-size: 14px;color: #262626;line-height: 0px;text-align: left;}.contntDiv-2-span{font-size: 10px;color: #1890FF;text-align: center;height: 16px;background: #E3F2FF;border-radius: 2px 2px 2px 2px;margin-left: 14px;}.contntDiv-1-d{height: 17px;font-size: 12px;color: #A3A3A3;}.line{background: #F3F8FF;border: 1px dotted #A3A3A3;}.contntDiv-item-left{// width: 100px;height: 18px;font-size: 13px;color: #A3A3A3;}.contntDiv-item-right{// width: 112px;height: 18px;font-size: 13px;color: #262626;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.contntDiv-item-right-bottom{height: 18px; font-size: 13px;color: #262626;text-align: left;display: flex;justify-content: flex-end;}
}.box-approve {min-height: 130px;max-height: calc(100% - 82px);overflow: auto;margin-top: -5px;
}
.step-icon {width: 8px;height: 8px;border-radius: 50%;background: #A3A3A3;border: 1px solid #A3A3A3;margin-left: 50px;// margin-top: 0px;
}
.titleDiv{display: flex;width: 155px;.time {color: #c2c2c2;font-size: 12px;margin-left: 90px;width: 100px;}
}:deep(.el-steps) {height: 100%;
}
:deep(.el-step__line){background: #E8F0FF;border: 1px dotted #A3A3A3;margin-left: 87px;margin-top: 20px;height: calc(100% - 20px);
}
:deep(.el-step__main) {padding: 8px 8px 9px;// background-color: #f1f6ff;min-height: 58px;box-sizing: border-box;margin-bottom: 12px;.el-step__description {font-size: 14px;}
}
:deep(.el-step__title){margin-left: 11px;color: #e0e0e0;
}
// :deep(.el-step__head){
//   // margin-left:110px;
// }
.reject-box {font-size: 12px;color: #a3a3a3;.reject-item-1 {display: flex;& > div:nth-child(1) {flex-shrink: 0;}& > div:nth-child(2) {word-break: break-word;width: 100%;}}
}
.descriptionDiv{height: 100%;width: 264px;margin-left: 76px;margin-top: -20px;
}
</style>

完成,请指教
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

kafka学习笔记03

SpringBoot2.X项目搭建整合Kafka客户端依赖配置 用自己对应的jdk版本。 先加上我们的web依赖。 添加kafka依赖: SpringBoot2.x整合Kafka客户端adminApi单元测试 设置端口号。 新建一个kafka测试类&#xff1a; 创建一个初始化的Kafka服务。 设置kafka的名称。 测试创建kafka。…

goland2024安装包(亲测可用)

目录 一、软件简介 二、软件下载 一、软件简介 Goland 是一款由 JetBrains 公司开发的集成开发环境&#xff08;IDE&#xff09;&#xff0c;专门用于 Go 语言的开发。它提供了丰富的功能和工具&#xff0c;帮助开发者更高效地编写、调试和管理 Go 语言项目。 功能特点&#x…

机器学习——模型评价

概述 在机器学习中&#xff0c;模型评价是评估和比较不同模型性能的关键步骤之一。它是通过对模型的预测结果与真实标签进行比较&#xff0c;从而量化模型的预测能力、泛化能力和稳定性。模型评价旨在选择最佳的模型&#xff0c;理解模型的行为&#xff0c;并为模型的改进提供…

「GO基础」文件名规范、关键字与标识符

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

Qt 4 QPushButton

Qt 常用控件 QPushButton 实例 Push Button:命令按钮。 入口文件 main.cpp #include "mainwindow.h"#include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);MainWindow w;w.show();return a.exec(); }头文件 mainwindow.h …

:app debug:armeabi-v7a failed to configure C/C++

报错信息 由于刚换电脑不久&#xff0c;新建native c工程时&#xff0c;出现报错如下&#xff1a; :app debug:armeabi-v7a failed to configure C/C null java.lang.NullPointerExceptionat com.android.build.gradle.tasks.CmakeQueryMetadataGenerator.getProcessBuilder(…

实验六 智能手机互联网程序设计(微信程序方向)实验报告

实验目的和要求 请完成创建图片库应用&#xff0c;显示一系列预设的图片。 提供按钮来切换显示不同类别的图片。 二、实验步骤与结果&#xff08;给出对应的代码或运行结果截图&#xff09; 1.WXML <view> <button bindtap"showAll">所有图片</but…

使用Python进行自动化测试【第163篇—自动化测试】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 如何使用Python进行自动化测试&#xff1a;测试框架的选择与应用 自动化测试是软件开发过程…

2024五一杯数学建模A题思路分析

文章目录 1 赛题思路2 比赛日期和时间3 组织机构4 建模常见问题类型4.1 分类问题4.2 优化问题4.3 预测问题4.4 评价问题 5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 比赛日期和时间 报名截止时间&#xff1a;2024…

模板的进阶

目录 非类型模板参数 C11的静态数组容器-array 按需实例化 模板的特化 函数模板特化 类模板特化 全特化与偏特化 模板的分离编译 总结 非类型模板参数 基本概念&#xff1a;模板参数类型分为类类型模板参数和非类类型模板参数 类类型模板参数&#xff1a;跟在class…

Linux硬件管理

文章目录 Linux硬件管理1.查看磁盘空间 df -h2.查看文件的磁盘占用空间 du -ah3.查看系统内存占用情况 htop Linux硬件管理 1.查看磁盘空间 df -h 语法 df [选项][参数]选项 -a或–all&#xff1a;包含全部的文件系统&#xff1b; –block-size<区块大小>&#xff1a;…

项目风采展示【车酷-保时捷第二屏】

桌面功能介绍&#xff1a; 1&#xff1a;支持本地app桌面展示 2&#xff1a;支持本地音乐控制

Spring Boot | Spring Boot 整合 “Servlet三大组件“ ( Servlet / Filter / Listene )

目录: Spring Boot 整合 "Servlet三大组件" &#xff1a;1. 使用 "组件注册" 的方式 "整合Servlet三大组件" ( 实际操作为 : 创建自定义的"三大组件"对象 结合刚创建"的自定义组件对象"来 将 XxxRegistrationBean对象 通过…

Flink CDC 的 debezium-json 格式和 debezium 原生格式是一回事吗?

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…

计算机网络 Cisco远程Telnet访问交换机和Console终端连接交换机

一、实验要求和内容 1、配置交换机进入特权模式密文密码为“abcd两位班内学号”&#xff0c;远程登陆密码为“123456” 2、验证PC0通过远程登陆到交换机上&#xff0c;看是否可以进去特权模式 二、实验步骤 1、将一台还没配置的新交换机&#xff0c;利用console线连接设备的…

深度解析SPARK的基本概念

关联阅读博客文章&#xff1a; 深入理解MapReduce&#xff1a;从Map到Reduce的工作原理解析 引言&#xff1a; 在当今大数据时代&#xff0c;数据处理和分析成为了企业发展的重要驱动力。Apache Spark作为一个快速、通用的大数据处理引擎&#xff0c;受到了广泛的关注和应用。…

IAR 使用笔记(IAR BIN大小为0异常解决)

烧写 由于芯片的内部SPI FLASH的0级BOOT 程序起到到开启JTAG SW 仿真功能&#xff0c;一旦内部SPI FLASH存储的BL0启动代码被损坏&#xff0c;芯片的JTAG 将不能被连接。所以对BL0的烧写需要谨慎&#xff0c;烧写BL0过程保证芯片不断电。 如果烧写了多备份的启动代码&#xff…

每日两题2

不同路径 class Solution { public:int uniquePaths(int m, int n) {vector<vector<int>> dp(m1, vector<int>(n1,0));//创建dp表dp[0][1] 1;//初始化//填表for(int i 1; i < m; i){for(int j 1; j < n; j){dp[i][j] dp[i-1][j] dp[i][j-1];}}ret…

Linux 内核学习(1) --- 时钟子系统

标题 时钟系统说明时钟树Clock Provider时钟通用数据结构clock_device 的注册clock_provider DTS配置和注册clock consumer时钟系统总结 时钟系统说明 时钟就是 SoC 中的脉搏&#xff0c;由它来控制各个部件按各自的节奏跳动。比如&#xff0c;CPU主频设置&#xff0c;串口的波…

潮玩宇宙小程序定制大逃杀游戏APP开发H5游戏

游戏名称&#xff1a;潮玩宇宙大逃杀 游戏类型&#xff1a;休闲竞技类小游戏 游戏目标&#xff1a;玩家通过选择房间躲避杀手&#xff0c;生存下来并瓜分被杀房间的元宝。 核心功能 房间选择&#xff1a;玩家进入游戏后&#xff0c;可以选择一间房间躲避杀手。杀手行动&…