vue el-descriptions 样式问题

原创已于 2025-02-07 13:45:02 修改 · 4.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-10-26 09:06:03 首次发布

博客介绍了在Vue和ElementUI中设置el-descriptions固定长度的方法，包括设置label固定长度、显示数据长度，给label设置固定颜色或单独样式。还提到在el-descriptions标签添加属性:contentStyle=\content_style\控制内容栏长度，并在data的return中定义content_style。

设置label固定长度使用这个

label-class-name="my-label"

.my-label {
  width: 145px;
}

设置显示数据长度使用这个

content-class-name="my-con"

.my-con {
  width: 500px;
}

给label设置固定颜色，或者判断某个使用单独样式

:label-class-name="index == 1 ? 'my-label' : ''"

.my-label {
  background: #ecf6fe !important;
}

参考地址：vue+elementUI 设置el-descriptions固定长度并对齐_el-description label 3个字和4个字的时候不对齐-优快云博客在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'
      },
    }
}