el-descriptions自定义样式列表

注意：类名和样式属性字段，都可以加到 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>
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

自定义样式前：

自定义样式后：