Descriptions 描述列表

列表形式展示多个字段。

基础用法

Descriptions 描述列表 - 图1

  1. <el-descriptions title="用户信息">
  2. <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
  3. <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
  4. <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
  5. <el-descriptions-item label="备注">
  6. <el-tag size="small">学校</el-tag>
  7. </el-descriptions-item>
  8. <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
  9. </el-descriptions>

不同尺寸

Descriptions 描述列表 - 图2

  1. <template>
  2. <el-radio-group v-model="size">
  3. <el-radio label="">默认</el-radio>
  4. <el-radio label="medium">中等</el-radio>
  5. <el-radio label="small">小型</el-radio>
  6. <el-radio label="mini">超小</el-radio>
  7. </el-radio-group>
  8. <el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
  9. <template slot="extra">
  10. <el-button type="primary" size="small">操作</el-button>
  11. </template>
  12. <el-descriptions-item>
  13. <template slot="label">
  14. <i class="el-icon-user"></i>
  15. 用户名
  16. </template>
  17. kooriookami
  18. </el-descriptions-item>
  19. <el-descriptions-item>
  20. <template slot="label">
  21. <i class="el-icon-mobile-phone"></i>
  22. 手机号
  23. </template>
  24. 18100000000
  25. </el-descriptions-item>
  26. <el-descriptions-item>
  27. <template slot="label">
  28. <i class="el-icon-location-outline"></i>
  29. 居住地
  30. </template>
  31. 苏州市
  32. </el-descriptions-item>
  33. <el-descriptions-item>
  34. <template slot="label">
  35. <i class="el-icon-tickets"></i>
  36. 备注
  37. </template>
  38. <el-tag size="small">学校</el-tag>
  39. </el-descriptions-item>
  40. <el-descriptions-item>
  41. <template slot="label">
  42. <i class="el-icon-office-building"></i>
  43. 联系地址
  44. </template>
  45. 江苏省苏州市吴中区吴中大道 1188 号
  46. </el-descriptions-item>
  47. </el-descriptions>
  48. <el-descriptions class="margin-top" title="无边框列表" :column="3" :size="size">
  49. <template slot="extra">
  50. <el-button type="primary" size="small">操作</el-button>
  51. </template>
  52. <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
  53. <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
  54. <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
  55. <el-descriptions-item label="备注">
  56. <el-tag size="small">学校</el-tag>
  57. </el-descriptions-item>
  58. <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
  59. </el-descriptions>
  60. </template>
  61. <script>
  62. export default {
  63. data () {
  64. return {
  65. size: ''
  66. };
  67. }
  68. }
  69. </script>

垂直列表

Descriptions 描述列表 - 图3

  1. <el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border>
  2. <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
  3. <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
  4. <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
  5. <el-descriptions-item label="备注">
  6. <el-tag size="small">学校</el-tag>
  7. </el-descriptions-item>
  8. <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
  9. </el-descriptions>
  10. <el-descriptions class="margin-top" title="垂直无边框列表" :column="4" direction="vertical">
  11. <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
  12. <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
  13. <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
  14. <el-descriptions-item label="备注">
  15. <el-tag size="small">学校</el-tag>
  16. </el-descriptions-item>
  17. <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
  18. </el-descriptions>

自定义样式

Descriptions 描述列表 - 图4

  1. <el-descriptions title="自定义样式列表" :column="3" border>
  2. <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
  3. <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
  4. <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
  5. <el-descriptions-item label="备注">
  6. <el-tag size="small">学校</el-tag>
  7. </el-descriptions-item>
  8. <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
  9. </el-descriptions>
  10. <style>
  11. .my-label {
  12. background: #E1F3D8;
  13. }
  14. .my-content {
  15. background: #FDE2E2;
  16. }
  17. </style>

Descriptions Attributes

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

Descriptions Slots

Name说明
title自定义标题,显示在左上方
extra自定义操作区,显示在右上方

Descriptions Item Attributes

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

Descriptions Item Slots

Name说明
label自定义标签文本