vue+elementUI 设置el-descriptions固定长度并对齐

本文主要是介绍vue+elementUI 设置el-descriptions固定长度并对齐，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题描述

对于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" >

---

我是真的服了，就这么个简单的问题，都没人讲清楚，真的逆天。

这篇关于vue+elementUI 设置el-descriptions固定长度并对齐的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---