本文介绍: 对于 el–descriptions 可通过两个属性contentStyle和labelStyle分别对其内容栏和标签栏的样式进行控制。其样式加载部分放在data里面。data() {return {// 居中// 解决不对齐的问题// 排列第二行},// 解决不对齐的问题// 排列第二行},同时这两个属性contentStyle和labelStyle，也可放在item里面，针对每个栏进行自定义效果。
问题描述
对于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: {
// 居中
'text-align': 'center',
// 设置长度
'width':"400px",
// 排列第二行
'word-break': 'break-all'
},
}
}
总结
对于 el–descriptions 可通过两个属性contentStyle和labelStyle分别对其内容栏和标签栏的样式进行控制。
<el-descriptions :contentStyle="content_style" :labelStyle="label_style"> 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" >原文地址:https://blog.csdn.net/zujiasheng/article/details/134203815
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_25686.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
