网站建设买了域名,贵州城乡建设部网站首页,仿做购物网站,确山网站建设最近接触拉了一个项目#xff0c;使用到 element-plus 中 el-collapse 折叠面板#xff0c;发现在使用中利用高官网多多少少的会出现问题。 #xff08;1.直接默认一个展开值#xff0c;发现时显时不显 2 . 数据渲染问题#xff0c;接口请求了#xff0c;页面数据不更新 …最近接触拉了一个项目使用到 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:valuedialogFormVisible:projectDeviceIdprojectDeviceId
/自己 引入组件
templatedivzmjDialogv-modelshowwidth460openedinittitle查看所有设备center div styledisplay:flex; width: 460pxdiv classel-dialog-divdiv classel-dialog_divleftdiv classdivleftlast v-for(el, index) in PurchaseInfo :keyindexp :classel.flagActive ? arrdata1Active : arrdata1/pp :style{width: 2 px, height: el.height px, background: #E8F0FF, borderRadius: 0px 0px 0px 0px, marginLeft: 8px}/p/div/divel-collapseclassel-collapse-parentv-modelactiveNameaccordionchangehandleCollapseChangerefmyCollapseRefel-collapse-itemv-for(item, index) in PurchaseInfo:keyindex:nameindex.toString()stylemargin-bottom: 10px;refitemHeighttemplate #titlediv :classitem.flagActive ? headerRightTrue : headerRightFlasespan classspanFalse/spandiv classitemApproveTimeFalse{{ item.approveTime }}/divdiv classtop-rightdiv {{item.operatorName}} span v-ifitem?.nodeId ({{item?.nodeId 120 ? 方案 : ( item?.nodeId 130 ? 商务活动 : (item?.nodeId 140 ? 配套 : ))}}) /span /divspan :classitem.flagActive ? headerRightspan1 : headerRightspan2{{ activeName.includes(index.toString()) ? 收起 : 展开 }}/span/div/div/templatediv classcontntDivdiv classcontntDiv-1div classcontntDiv-1span classcontntDiv-1-span {{item.model}} /spanspan classcontntDiv-2-span {{ item?.supportLabel 1 ? 标准架型 : (item?.supportLabel 3 ? 模块架型 : 非标架型)}} /span/divdiv classcontntDiv-1-d {{ item?.deviceCount}}架 /div/divdiv classline/divdivdiv classcontntDiv-item-left 片区 /divdiv classcontntDiv-item-right {{ item?.areaName }} /div/divdivdiv classcontntDiv-item-left 支架类型 /divdiv classcontntDiv-item-right {{ GET_SUPPORT_TYPE(item?.firstDeviceType) }} - {{ GET_SUPPORT_SECOND_TYPE_NAME(item?.secondDeviceType) }}/div/divdivdiv classcontntDiv-item-left 图号 /divdiv classcontntDiv-item-right {{item?.standardGroupNo }} /div/divdivdiv classcontntDiv-item-left 单架重量 /divdiv classcontntDiv-item-right {{ item?.singleWeight}}吨 /div/div divdiv classcontntDiv-item-left 支架特征代号 /divdiv classcontntDiv-item-right {{ joinSupportFeatureModel }} /div/divdiv classcontntDiv-item-right-bottom v-ifitem?.supportFeatureModel item?.supportFeatureModel?.length 0*支架产品型号{{ item?.supportProductModel}}/div/divdiv classbox-approve v-ifitem?.flowApproveDtoList?.length0el-steps directionvertical :active1 align-centerel-step v-for(v, i) in item?.flowApproveDtoList classmy-text :keyitemplate #icondiv classtitleDivdiv classtime{{ v.updateTime }}/div/div/templatetemplate #titlediv classstep-icon/div/templatetemplate #descriptiondiv classdescriptionDivdiv stylecolor: #707070; font-size: 14pxspan class stylecolor: #3076fe{{ v.approveUserName }}/span!-- approveType 1 提交 2 审批 status 1 未审批 2 审批通过 3 驳回 --span v-ifv.approveType 1 v.status 2 isLastElement(item?.flowApproveDtoList, i) stylecolor: rgba(0, 0, 0, 0.56)span stylecolor: #262626提交审批/span/spanspan v-elsespan v-ifv.approveType 1 v.status 2 stylecolor: rgba(0, 0, 0, 0.56)span stylecolor: #262626再次提交审批/span/spanspan v-ifv.approveType 1 v.status 3 stylecolor: rgba(0, 0, 0, 0.56)span stylecolor: #ffb236审批驳回/span/spanspan v-ifv.approveType 2 v.status 2span stylecolor: #63af17审批通过/span/spanspan v-ifv.approveType 2 v.status 3将span stylecolor: #ffb236审批驳回/span/span/span/divdiv v-if(v.approveType 1 || v.approveType 2) v.status 3 classreject-boxdiv classreject-item-1div驳回原因/divdiv{{ v.rejectReason }}/div/div/div/div/template/el-step/el-steps/div/el-collapse-item/el-collapse/div/divtemplate #footerdiv classdialog-footerel-button clickshow false返回/el-button/div/template/zmjDialog/div
/templatescript setup langts
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(vA1){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)
}
/scriptstyle langscss 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完成请指教
