程序员scholar
  • Element-UI
  • 数据展示组件
scholar
2024-08-12
目录

描述列表组件 (Descriptions)

# 描述列表组件 (Descriptions)

Element UI 的 Descriptions 组件用于以列表形式展示多个字段，常用于展示对象的属性和数据。它可以自定义布局、样式，支持添加标题和额外的操作区。

提示

Descriptions 组件官方文档：https://element.eleme.cn/#/zh-CN/component/descriptions (opens new window)

# 1. 基本用法

基本语法：使用 <el-descriptions> 标签创建一个描述列表，通过 column 属性设置每行展示的项数，通过 title 和 extra 属性分别设置左上方的标题和右上方的额外操作区。

<template>
  <el-descriptions title="用户信息" :column="3" border>
    <el-descriptions-item label="用户名">张三</el-descriptions-item>
    <el-descriptions-item label="手机号">13812345678</el-descriptions-item>
    <el-descriptions-item label="电子邮箱">zhangsan@example.com</el-descriptions-item>
    <el-descriptions-item label="居住地址">北京市朝阳区</el-descriptions-item>
    <el-descriptions-item label="注册时间">2024-01-01</el-descriptions-item>
  </el-descriptions>
</template>

<script>
export default {
  // 组件逻辑
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • column 属性：定义每行展示的列数，默认是 3 列。通过设置不同的 column 值，可以控制每行展示多少个字段。
  • border 属性：设置 border 属性可以为描述列表添加边框。
  • title 属性：可以为描述列表添加左上角的标题。
  • image-20240810122621845

# 2. Descriptions 属性

参数 说明 类型 可选值 默认值
border 是否带有边框 boolean — false
column 一行 Descriptions Item 的数量 number — 3
direction 排列的方向 string vertical / horizontal horizontal
size 列表的尺寸 string medium / small / mini —
title 标题文本，显示在左上方 string — —
extra 操作区文本，显示在右上方 string — —
colon 是否显示冒号 boolean — true
labelClassName 自定义标签类名 string — —
contentClassName 自定义内容类名 string — —
labelStyle 自定义标签样式 object — —
contentStyle 自定义内容样式 object — —

  • direction 属性：控制列表的排列方向，可以设置为 horizontal（水平）或 vertical（垂直）。

    <el-descriptions title="垂直布局" :column="1" direction="vertical">
  <el-descriptions-item label="用户名">张三</el-descriptions-item>
  <el-descriptions-item label="手机号">13812345678</el-descriptions-item>
</el-descriptions>
    1
    2
    3
    4

  • size 属性：定义描述列表的尺寸，可选值为 medium、small 和 mini，默认不设置尺寸。

    <el-descriptions title="小尺寸列表" size="small" :column="2" border>
  <el-descriptions-item label="用户名">张三</el-descriptions-item>
  <el-descriptions-item label="手机号">13812345678</el-descriptions-item>
</el-descriptions>
    1
    2
    3
    4

  • colon 属性：设置是否显示标签后的冒号，默认显示。

# 3. Descriptions 插槽

Descriptions 组件提供了以下几个插槽，便于自定义内容：

插槽名 说明
title 自定义标题，显示在左上方
extra 自定义操作区，显示在右上方

  • title 插槽：可以通过 slot="title" 自定义标题内容。

    <el-descriptions>
  <template #title>
    <span>自定义标题</span>
  </template>
  <el-descriptions-item label="用户名">张三</el-descriptions-item>
</el-descriptions>
    1
    2
    3
    4
    5
    6

  • extra 插槽：可以通过 slot="extra" 自定义右上角的操作区。

    <el-descriptions>
  <template #extra>
    <el-button type="primary">操作按钮</el-button>
  </template>
  <el-descriptions-item label="用户名">张三</el-descriptions-item>
</el-descriptions>
    1
    2
    3
    4
    5
    6

# 4. Descriptions Item 属性

Descriptions 组件的子组件 Descriptions Item 提供了一些用于自定义每个描述项的属性：

参数 说明 类型 可选值 默认值
label 标签文本 string — —
span 列的数量 number — 1
labelClassName 自定义标签类名 string — —
contentClassName 自定义内容类名 string — —
labelStyle 自定义标签样式 object — —
contentStyle 自定义内容样式 object — —

  • label 属性：设置标签文本，通常用于描述字段的名称。

  • span 属性：设置描述项占据的列数，默认为 1。

    <el-descriptions title="用户信息" :column="3" border>
  <el-descriptions-item label="用户名" span="2">张三</el-descriptions-item>
  <el-descriptions-item label="手机号">13812345678</el-descriptions-item>
</el-descriptions>
    1
    2
    3
    4

  • labelClassName 和 contentClassName：可以为标签和内容自定义类名，以便更灵活地控制样式。

  • labelStyle 和 contentStyle：可以为标签和内容应用自定义样式，传入一个样式对象。

# 5. Descriptions Item 插槽

Descriptions Item 组件也提供了插槽，用于自定义标签文本：

插槽名 说明
label 自定义标签文本

  • label 插槽：通过 slot="label" 来自定义标签文本内容。

    <el-descriptions title="用户信息" :column="3" border>
  <el-descriptions-item>
    <template #label>
      <span style="color: red;">自定义标签</span>
    </template>
    张三
  </el-descriptions-item>
</el-descriptions>
    1
    2
    3
    4
    5
    6
    7
    8

# 6. 描述列表组件常用示例

# 带有边框的描述列表

通过 border 属性为描述列表添加边框，使列表更加清晰。

<el-descriptions title="用户信息" :column="3" border>
  <el-descriptions-item label="用户名">张三</el-descriptions-item>
  <el-descriptions-item label="手机号">13812345678</el-descriptions-item>
  <el-descriptions-item label="电子邮箱">zhangsan@example.com</el-descriptions-item>
</el-descriptions>
1
2
3
4
5

image-20240810122758688

# 自定义标题和操作区

通过 title 和 extra 插槽自定义描述列表的标题和操作区。

<el-descriptions :column="2" border>
  <template #title>
    <span>自定义标题</span>
  </template>
  <template #extra>
    <el-button type="primary">操作按钮</el-button>
  </template>
  <el-descriptions-item label="用户名">张三</el-descriptions-item>
  <el-descriptions-item label="手机号">13812345678</el-descriptions-item>
</el-descriptions>
1
2
3
4
5
6
7
8
9
10

image-20240810122822562

# 设置列数和排列方向

在使用 Element UI 的 Descriptions 组件时，direction 属性用于控制描述列表的排列方向，即水平排列（horizontal）和垂直排列（vertical）。

水平排列（Horizontal）

水平排列是 Descriptions 组件的默认排列方式。在水平排列中，每个 el-descriptions-item 会按行排列，所有项目在同一行内依次展示，直到达到 column 设置的列数后换行。

<el-descriptions title="用户信息" :column="2" direction="horizontal" border>
  <el-descriptions-item label="用户名">张三</el-descriptions-item>
  <el-descriptions-item label="手机号">13812345678</el-descriptions-item>
  <el-descriptions-item label="电子邮箱">zhangsan@example.com</el-descriptions-item>
  <el-descriptions-item label="地址">北京市海淀区</el-descriptions-item>
</el-descriptions>
1
2
3
4
5
6

效果：在上面的示例中，每一行显示 2 个描述项（column="2"）。因此，你会看到用户名和手机号在同一行，而电子邮箱和地址在下一行。

image-20240810125800796

垂直排列（Vertical）

垂直排列意味着每个 el-descriptions-item 都会按列排列。这个布局方式通常适用于内容较长或描述项需要跨多列的场景。

<el-descriptions title="用户信息" :column="2" direction="vertical" border>
  <el-descriptions-item label="用户名">张三</el-descriptions-item>
  <el-descriptions-item label="手机号">13812345678</el-descriptions-item>
  <el-descriptions-item label="电子邮箱">zhangsan@example.com</el-descriptions-item>
  <el-descriptions-item label="地址">北京市海淀区</el-descriptions-item>
</el-descriptions>
1
2
3
4
5
6

效果：在这个示例中，用户名、手机号、电子邮箱和地址依次垂直排列。如果列数（column）是 2，说明这两列是平行的，即标签和内容分布在两列中。你应该会看到所有标签排列在第一列，所有内容排列在第二列。

image-20240810125723314

# 7. 描述列表组件使用场景

# 用户详情展示

在企业环境中，展示用户的详细信息是非常常见的需求，尤其是在后台管理系统中。以下代码展示了如何使用 Descriptions 组件来展示用户的详细信息。

<template>
  <div class="user-details">
    <el-card shadow="hover">
      <el-descriptions title="用户详情" :column="2" border>
        <el-descriptions-item label="用户名">张三</el-descriptions-item>
        <el-descriptions-item label="手机号">13812345678</el-descriptions-item>
        <el-descriptions-item label="电子邮箱">zhangsan@example.com</el-descriptions-item>
        <el-descriptions-item label="居住地址">北京市朝阳区</el-descriptions-item>
        <el-descriptions-item label="注册时间">2024-01-01</el-descriptions-item>
        <el-descriptions-item label="最后登录时间">2024-08-10 14:00</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据逻辑可以在这里补充，例如从API获取用户信息
    };
  }
};
</script>

<style scoped>
.user-details {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}
</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

# 订单详情展示

电商系统中，订单详情展示非常重要。使用 Descriptions 组件可以将订单的各个信息项清晰地展示出来。

<template>
  <div class="order-details">
    <el-card shadow="hover">
      <el-descriptions title="订单详情" :column="3" border>
        <el-descriptions-item label="订单号">202408100001</el-descriptions-item>
        <el-descriptions-item label="下单时间">2024-08-10 12:00</el-descriptions-item>
        <el-descriptions-item label="支付方式">支付宝</el-descriptions-item>
        <el-descriptions-item label="物流状态">已发货</el-descriptions-item>
        <el-descriptions-item label="收货地址">北京市海淀区中关村</el-descriptions-item>
        <el-descriptions-item label="订单总金额">¥ 1,200.00</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 可以从API中获取订单详细信息
    };
  }
};
</script>

<style scoped>
.order-details {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}
</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

# 产品规格展示

在产品详情页面，展示产品的规格参数是常见需求。以下代码展示了如何使用 Descriptions 组件来展示产品的规格信息。

<template>
  <div class="product-specs">
    <el-card shadow="hover">
      <el-descriptions title="产品规格" :column="2" border>
        <el-descriptions-item label="颜色">红色</el-descriptions-item>
        <el-descriptions-item label="尺寸">L</el-descriptions-item>
        <el-descriptions-item label="重量">1.2kg</el-descriptions-item>
        <el-descriptions-item label="材质">棉</el-descriptions-item>
        <el-descriptions-item label="产地">中国</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 可以从产品API中获取规格信息
    };
  }
};
</script>

<style scoped>
.product-specs {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}
</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

# API 文档展示

在开发者平台或内部工具中，展示 API 文档时，可以使用 Descriptions 组件来展示接口的各个参数和返回值的说明。

<template>
  <div class="api-documentation">
    <el-card shadow="hover">
      <el-descriptions title="API 参数" :column="2" border>
        <el-descriptions-item label="参数名">userId</el-descriptions-item>
        <el-descriptions-item label="类型">String</el-descriptions-item>
        <el-descriptions-item label="必填">是</el-descriptions-item>
        <el-descriptions-item label="说明">用户ID</el-descriptions-item>
        <el-descriptions-item label="返回值">用户信息对象</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 这里可以展示API文档的详细信息
    };
  }
};
</script>

<style scoped>
.api-documentation {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}
</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

# 审批流程展示

企业管理系统中，展示审批流程是常见的需求。以下代码展示了如何使用 Descriptions 组件来展示审批的各个步骤信息。

<template>
  <div class="approval-process">
    <el-card shadow="hover">
      <el-descriptions title="审批流程" :column="3" border>
        <el-descriptions-item label="审批人">李四</el-descriptions-item>
        <el-descriptions-item label="审批时间">2024-08-10 15:00</el-descriptions-item>
        <el-descriptions-item label="审批状态">通过</el-descriptions-item>
        <el-descriptions-item label="下一步审批人">王五</el-descriptions-item>
        <el-descriptions-item label="备注">无</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 从API获取审批流程相关信息
    };
  }
};
</script>

<style scoped>
.approval-process {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}
</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

# 数据统计摘要展示

在数据报表或统计分析页面，使用 Descriptions 组件来展示一些关键统计指标的摘要。

<template>
  <div class="data-summary">
    <el-card shadow="hover">
      <el-descriptions title="数据摘要" :column="2" border>
        <el-descriptions-item label="总销售额">¥ 1,000,000</el-descriptions-item>
        <el-descriptions-item label="用户增长率">15%</el-descriptions-item>
        <el-descriptions-item label="总访问量">2,000,000</el-descriptions-item>
        <el-descriptions-item label="订单转化率">2%</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据统计可以通过API获取并展示在这里
    };
  }
};
</script>

<style scoped>
.data-summary {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}
</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

# 合同信息展示

在合同管理系统中，使用 Descriptions 组件展示合同的相关信息，如合同编号、签署时间、合同金额等。

<template>
  <div class="contract-info">
    <el-card shadow="hover">
      <el-descriptions title="合同信息" :column="3" border>
        <el-descriptions-item label="合同编号">HT20240810001</el-descriptions-item>
        <el-descriptions-item label="签署时间">2024-08-10</el-descriptions-item>
        <el-descriptions-item label="合同金额">¥ 500,000</el-descriptions-item>
        <el-descriptions-item label="合同状态">有效</el-descriptions-item>
        <el-descriptions-item label="合同备注">合同已经双方签署</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 从API获取合同相关信息
    };
  }
};
</script>

<style scoped>
.contract-info {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}
</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
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08
空状态组件 (Empty)
结果组件 (Result)

← 结果组件 (Result)→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar