绝配前端组件库

# Descriptions 描述列表

列表形式展示多个字段。

# 基础用法

用户信息
用户名kooriookami
手机号18100000000
居住地苏州市
备注
联系地址江苏省苏州市吴中区吴中大道 1188 号
<template>
  <jp-descriptions title="用户信息">
    <jp-descriptions-item label="用户名">kooriookami</jp-descriptions-item>
    <jp-descriptions-item label="手机号">18100000000</jp-descriptions-item>
    <jp-descriptions-item label="居住地">苏州市</jp-descriptions-item>
    <jp-descriptions-item label="备注">
      <jp-tag size="small">学校</jp-tag>
    </jp-descriptions-item>
    <jp-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</jp-descriptions-item>
  </jp-descriptions>
</template>
显示代码

# 不同尺寸

带边框列表
用户名 kooriookami 手机号 18100000000 居住地 苏州市
备注 联系地址 江苏省苏州市吴中区吴中大道 1188 号
无边框列表
用户名kooriookami
手机号18100000000
居住地苏州市
备注
联系地址江苏省苏州市吴中区吴中大道 1188 号
<template>
  <div>
    <jp-radio-group v-model="size">
      <jp-radio label="">默认</jp-radio>
      <jp-radio label="medium">中等</jp-radio>
      <jp-radio label="small">小型</jp-radio>
      <jp-radio label="mini">超小</jp-radio>
    </jp-radio-group>

    <jp-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
      <template slot="extra">
        <jp-button type="primary" size="small">操作</jp-button>
      </template>
      <jp-descriptions-item>
        <template slot="label">
          <i class="jp-icon-user"></i>
          用户名
        </template>
        kooriookami
      </jp-descriptions-item>
      <jp-descriptions-item>
        <template slot="label">
          <i class="jp-icon-mobile-phone"></i>
          手机号
        </template>
        18100000000
      </jp-descriptions-item>
      <jp-descriptions-item>
        <template slot="label">
          <i class="jp-icon-location-outline"></i>
          居住地
        </template>
        苏州市
      </jp-descriptions-item>
      <jp-descriptions-item>
        <template slot="label">
          <i class="jp-icon-tickets"></i>
          备注
        </template>
        <jp-tag size="small">学校</jp-tag>
      </jp-descriptions-item>
      <jp-descriptions-item>
        <template slot="label">
          <i class="jp-icon-office-building"></i>
          联系地址
        </template>
        江苏省苏州市吴中区吴中大道 1188 号
      </jp-descriptions-item>
    </jp-descriptions>

    <jp-descriptions class="margin-top" title="无边框列表" :column="3" :size="size">
      <template slot="extra">
        <jp-button type="primary" size="small">操作</jp-button>
      </template>
      <jp-descriptions-item label="用户名">kooriookami</jp-descriptions-item>
      <jp-descriptions-item label="手机号">18100000000</jp-descriptions-item>
      <jp-descriptions-item label="居住地">苏州市</jp-descriptions-item>
      <jp-descriptions-item label="备注">
        <jp-tag size="small">学校</jp-tag>
      </jp-descriptions-item>
      <jp-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</jp-descriptions-item>
    </jp-descriptions>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: ''
    }
  }
}
</script>
显示代码

# 垂直列表

垂直带边框列表
用户名手机号居住地
kooriookami18100000000苏州市
备注联系地址
江苏省苏州市吴中区吴中大道 1188 号
垂直无边框列表
用户名手机号居住地
kooriookami18100000000苏州市
备注联系地址
江苏省苏州市吴中区吴中大道 1188 号
<template>
  <div>
    <jp-descriptions title="垂直带边框列表" direction="vertical" :column="4" border>
      <jp-descriptions-item label="用户名">kooriookami</jp-descriptions-item>
      <jp-descriptions-item label="手机号">18100000000</jp-descriptions-item>
      <jp-descriptions-item label="居住地" :span="2">苏州市</jp-descriptions-item>
      <jp-descriptions-item label="备注">
        <jp-tag size="small">学校</jp-tag>
      </jp-descriptions-item>
      <jp-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</jp-descriptions-item>
    </jp-descriptions>

    <jp-descriptions class="margin-top" title="垂直无边框列表" :column="4" direction="vertical">
      <jp-descriptions-item label="用户名">kooriookami</jp-descriptions-item>
      <jp-descriptions-item label="手机号">18100000000</jp-descriptions-item>
      <jp-descriptions-item label="居住地" :span="2">苏州市</jp-descriptions-item>
      <jp-descriptions-item label="备注">
        <jp-tag size="small">学校</jp-tag>
      </jp-descriptions-item>
      <jp-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</jp-descriptions-item>
    </jp-descriptions>
  </div>
</template>
显示代码

# 自定义样式

自定义样式列表
用户名kooriookami手机号18100000000居住地苏州市
备注联系地址江苏省苏州市吴中区吴中大道 1188 号
<template>
  <jp-descriptions title="自定义样式列表" :column="3" border>
    <jp-descriptions-item label="用户名" labjp-class-name="my-label" content-class-name="my-content">kooriookami</jp-descriptions-item>
    <jp-descriptions-item label="手机号">18100000000</jp-descriptions-item>
    <jp-descriptions-item label="居住地">苏州市</jp-descriptions-item>
    <jp-descriptions-item label="备注">
      <jp-tag size="small">学校</jp-tag>
    </jp-descriptions-item>
    <jp-descriptions-item label="联系地址" :contentStyle="{ 'text-align': 'right' }">江苏省苏州市吴中区吴中大道 1188 号</jp-descriptions-item>
  </jp-descriptions>
</template>
<style scoped>
.my-label {
  background: #e1f3d8;
}

.my-content {
  background: #fde2e2;
}
</style>
显示代码

# Descriptions Attributes

参数 说明 类型 可选值 默认值
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 — —

# Descriptions Slots

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

# Descriptions Item Attributes

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

# Descriptions Item Slots

Name 说明
label 自定义标签文本

← Result 结果 →