el-descriptions自定义样式列表

发布时间:2024年01月03日

注意:类名和样式属性字段,都可以加到 el-descriptions 或者 el-descriptions-item。
在这里插入图片描述
在这里插入图片描述

<template>
  <div class="DescriptionsPage">
    <el-descriptions title="el-descriptions自定义样式列表" :column="2" border :size="size" :direction="direction"
      label-class-name="my-label" content-class-name="my-content">
      <el-descriptions-item label="人员姓名" :label-style="labelStyle" :content-style="contentStyle">
        {{ detail.name }}
      </el-descriptions-item>
      <el-descriptions-item label="人员性别">
        {{ detail.sex }}
      </el-descriptions-item>
      <el-descriptions-item label="人员手机号">
        {{ detail.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="人员居住地址">
        {{ detail.address }}
      </el-descriptions-item>
      <el-descriptions-item label="数字1">
        {{ detail.num1 }}
      </el-descriptions-item>
      <el-descriptions-item label="数字2">
        {{ detail.num2 }}
      </el-descriptions-item>
      <!-- :span="2" 占用2列表 -->
      <el-descriptions-item :span="2" label="备注">
        {{ detail.remark }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
    
<script>
export default {
  name: "DescriptionsPage",
  props: {},
  data() {
    return {
     // 列表的尺寸 medium / small / mini
      size: "small",
      //	排列的方向 vertical / horizontal
      direction: "horizontal", 
      // 	自定义标签样式
      labelStyle: {
        'color': '#000',
        'text-align': 'center',
        'font-weight': '600',
        'height': '40px',
        'background-color': '#d6dbe1',
        'min-width': '100px',
        'word-break': 'keep-all'
      },
      //自定义内容样式
      contentStyle: {
        'text-align': 'center',
        'word-break': 'break-all'
      },

      detail: {
        name: "张三三",
        sex: "男",
        phone: "17890987656",
        address: "浙江省杭州市XXX街道XXXX小区",
        num1: "123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890",
        num2: "098765432109876543210987654321098765432109876543210987654321098765432109876543210987654321",
        remark:
          "备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注",
      },
    };
  },
};
</script>
  
<style scoped>
.DescriptionsPage {
  /deep/ .my-label {
    min-width: 100px;
    font-weight: 800;
    background-color: #ecf5ff;
    /* color: #fff; */
  }

  /deep/ .my-content {
    word-break: break-all;
    word-wrap: break-word;
    /* background: #FEF0F0; */
  }
}
</style>
    

自定义样式前:

在这里插入图片描述自定义样式后:
在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_41549971/article/details/135344074
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。