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

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