vue3 element-plus flex布局 el-descriptions描述列表高度自适应 解决高度溢出
【代码】vue3 element-plus flex布局 el-descriptions描述列表高度自适应 解决高度溢出。
·
<el-descriptions class="descriptions" title="xxx" :column="1" border>
<el-descriptions-item>
<template #label>
<div class="cell-item">xxx</div>
</template>
xxx
</el-descriptions-item>
</el-descriptions>
取一个class="descriptions"名称,防止影响其他描述列表的样式,不过这种
自适应的样式设置全局样式应该好点
重点:通过子绝父相使得自适应高度正常
// 描述列表
.descriptions {
height: 100%;
width: 100%;
}
// 深度选择器
:deep(.descriptions .el-descriptions__body) {
position: relative;// 父相
}
:deep(.descriptions .el-descriptions__body .el-descriptions__table) {
position: absolute;// 子绝
}
类似还有el-table表格的自适应,可以参考我的另一篇文章:
https://blog.csdn.net/Lsiyi_/article/details/147411288?spm=1001.2014.3001.5501
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)