首页 前端知识 vue elementUI 设置el-descriptions固定长度并对齐

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

2024-05-26 00:05:55 前端知识 前端哥 866 629 我要收藏

问题描述

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9506.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!