elementui 描述列表Descriptions组件宽度修改

您所在的位置：网站首页 › el-table-column设置宽度占比 › elementui 描述列表Descriptions组件宽度修改

elementui 描述列表Descriptions组件宽度修改

2023-10-16 20:20| 来源: 网络整理| 查看: 265

注意，该项目基于常规vue-element-admin后台系统排版

问题样式1

描述列表占满了整个右侧主内容区域在这里插入图片描述

解决1 kooriookami kooriookami kooriookami >>> .el-descriptions__body { width: 70%; }

在这里插入图片描述这样就可以用百分比修改宽度了。再加上自己想要的margin值。或者，给描述列表外边套一层，给套的这层设置宽度，再加padding值，也可以实现，限制总宽度。

样式问题2

当一个页面有俩个列表时，一个列表是4列，一个是2列，这样每列的宽度分布不一样，看起来不够整齐。在这里插入图片描述

解决2

给el-descriptions-item加上:contentStyle='contentStyle' :labelStyle='labelStyle'

kooriookami kooriookami kooriookami

并在data中定义

export default { name: "BankBillDetail", data() { return { //内容样式 contentStyle: { 'text-align': 'center', }, //label样式 labelStyle: { 'width': '200px' } } } }

文档参考elementUI官方文档中的自定义样式在这里插入图片描述

【本文地址】

elementui 描述列表Descriptions组件宽度修改

elementui 描述列表Descriptions组件宽度修改

今日新闻

推荐新闻