问题描述
对于elementUI组件,el-descriptions 在以类似列表的形式排列的时候,上下无法对齐的问题。
问题解决
在el-descriptions 标签中,添加属性: :contentStyle="content_style" 控制其内容栏长度
<el-descriptions class="margin-top" :column="2" size="20px" border :contentStyle="content_style">
在data的return中定义 content_style
data() {
return {
content_style: {
// 居中
'text-align': 'center',
// 设置长度
'width':"400px",
// 排列第二行
'word-break': 'break-all'
},
}
}
结果:控制内容栏长度,上下已对齐,解决问题
总结
对于 el-descriptions 可通过两个属性contentStyle和labelStyle分别对其内容栏和标签栏的样式进行控制。
<el-descriptions :contentStyle="content_style" :labelStyle="label_style">
其样式加载部分放在data里面。
data() {
return {
content_style: {
// 居中
'text-align': 'center',
// 解决不对齐的问题
'width':"400px",
// 排列第二行
'word-break': 'break-all'
},
label_style: {
// 解决不对齐的问题
'width':"200px",
// 排列第二行
'word-break': 'break-all'
},
}
同时这两个属性contentStyle和labelStyle,也可放在item里面,针对每个栏进行自定义效果。
<el-descriptions-item :contentStyle="content_style" >
我是真的服了,就这么个简单的问题,都没人讲清楚,真的逆天。