Descriptions 描述列表

以列表形式展示多个字段。

基础用法

无边框模式下，简单地成组展示多个只读字段，一般用于详情页的信息展示。未设置 column 时，会根据容器宽度自动响应列数（最宽 4 列，随宽度变窄依次降为 3、2、1 列）。

HorizontalVertical

企业信息

xxxxxxx有限公司

经营范围软件开发、技术咨询、技术服务、信息系统集成服务、企业管理咨询以及面向行业客户的数字化解决方案建设与长期运维服务

11111111

统一社会信用代码 11111988594758

注册时间2023年1月

注册资本（万元） 1000万人民币

登记注册类型中外合资

行业服务业

行业小类7216

企业规模大型

区域西南

企业控股情况国有控股

是否国网是

法人张三

联系人李四

区号023

注册地重庆市渝北区

分机号897

手机号18972334956

vue

<template>
  <u-radio-group v-model="direction">
    <u-radio value="horizontal">Horizontal</u-radio>
    <u-radio value="vertical">Vertical</u-radio>
  </u-radio-group>

  <u-descriptions class="margin-top" title="企业信息" :direction="direction">
    <u-descriptions-item label="企业名称" label-tooltip="企业工商登记名称">
      xxxxxxx有限公司
    </u-descriptions-item>
    <u-descriptions-item label="经营范围">
      软件开发、技术咨询、技术服务、信息系统集成服务、企业管理咨询以及面向行业客户的数字化解决方案建设与长期运维服务
    </u-descriptions-item>
    <u-descriptions-item
      label="组织机构代码"
      label-tooltip="组织机构代码是组织机构在社会经济活动中的通行证"
    >
      11111111
    </u-descriptions-item>
    <u-descriptions-item label="统一社会信用代码">
      11111988594758
    </u-descriptions-item>
    <u-descriptions-item label="注册时间">2023年1月</u-descriptions-item>
    <u-descriptions-item label="注册资本（万元）">
      1000万人民币
    </u-descriptions-item>
    <u-descriptions-item label="登记注册类型">中外合资</u-descriptions-item>
    <u-descriptions-item label="行业">服务业</u-descriptions-item>
    <u-descriptions-item label="行业小类">7216</u-descriptions-item>
    <u-descriptions-item label="企业规模">大型</u-descriptions-item>
    <u-descriptions-item label="区域">西南</u-descriptions-item>
    <u-descriptions-item label="企业控股情况">国有控股</u-descriptions-item>
    <u-descriptions-item label="是否国网">是</u-descriptions-item>
    <u-descriptions-item label="法人">张三</u-descriptions-item>
    <u-descriptions-item label="联系人">李四</u-descriptions-item>
    <u-descriptions-item label="区号">023</u-descriptions-item>
    <u-descriptions-item label="注册地">重庆市渝北区</u-descriptions-item>
    <u-descriptions-item label="分机号">897</u-descriptions-item>
    <u-descriptions-item label="手机号">18972334956</u-descriptions-item>
  </u-descriptions>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const direction = ref<'horizontal' | 'vertical'>('horizontal')
</script>

<style scoped>
.margin-top {
  margin-top: 20px;
}
</style>

单列样式

设置 column="1" 即为单列描述列表；配合 label-width 固定标签列宽度可使各行标签与内容对齐，再通过 Descriptions 的 label-align 统一控制标签左/右对齐。

LeftRight

企业信息

企业名称 xxxxxxx有限公司

注册时间2023年1月

行业服务业

区域西南

号码11516-59849

法人张三

注册地重庆市渝北区光电园

结合表单

可以用 Descriptions 展示只读详情，在进入编辑态时切换为 Form 表单，实现类似 inline 编辑的交互。

企业信息

企业名称xxxxxxx有限公司

注册时间2023年1月

行业服务业

区域西南

联系人李四

联系电话18972334956

服务商类型

营业执照

vue

<template>
  <div class="descriptions-edit-demo">
    <u-descriptions v-if="!editing" :column="3" direction="vertical">
      <template #title>
        <span class="descriptions-edit-demo__title">
          企业信息
          <u-button
            class="descriptions-edit-demo__edit"
            type="primary"
            link
            @click="startEdit"
          >
            <u-icon :size="20">
              <EditFilled />
            </u-icon>
          </u-button>
        </span>
      </template>

      <u-descriptions-item label="企业名称">
        {{ data.companyName }}
      </u-descriptions-item>
      <u-descriptions-item label="注册时间">
        {{ data.registerDate }}
      </u-descriptions-item>
      <u-descriptions-item label="行业">
        {{ data.industry }}
      </u-descriptions-item>
      <u-descriptions-item label="区域">
        {{ data.region }}
      </u-descriptions-item>
      <u-descriptions-item label="联系人">
        {{ data.contactName }}
      </u-descriptions-item>
      <u-descriptions-item label="联系电话">
        {{ data.phone }}
      </u-descriptions-item>
      <u-descriptions-item label="服务商类型">
        <u-tag
          v-for="type in data.serviceTypes"
          :key="type"
          class="descriptions-edit-demo__tag"
        >
          {{ type.toUpperCase() }}
        </u-tag>
      </u-descriptions-item>
      <u-descriptions-item label="营业执照" :span="2">
        <u-image
          class="descriptions-edit-demo__license-image"
          :src="data.licenseImage"
          fit="cover"
        />
      </u-descriptions-item>
    </u-descriptions>

    <template v-else>
      <div class="descriptions-edit-demo__header">
        <span class="descriptions-edit-demo__title">企业信息</span>
      </div>

      <u-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-position="top"
        class="descriptions-edit-demo__form"
      >
        <u-form-item label="企业名称" prop="companyName">
          <u-input v-model="form.companyName" />
        </u-form-item>
        <u-form-item label="注册时间" prop="registerDate">
          <u-input v-model="form.registerDate" />
        </u-form-item>
        <u-form-item label="行业" prop="industry">
          <u-select v-model="form.industry" placeholder="请选择行业">
            <u-option label="服务业" value="服务业" />
            <u-option label="制造业" value="制造业" />
            <u-option label="信息技术" value="信息技术" />
          </u-select>
        </u-form-item>
        <u-form-item label="区域" prop="region">
          <u-select v-model="form.region" placeholder="请选择区域">
            <u-option label="西南" value="西南" />
            <u-option label="华东" value="华东" />
            <u-option label="华南" value="华南" />
          </u-select>
        </u-form-item>
        <u-form-item label="联系人" prop="contactName">
          <u-input v-model="form.contactName" />
        </u-form-item>
        <u-form-item label="联系电话" prop="phone">
          <u-input v-model="form.phone" />
        </u-form-item>
        <u-form-item label="服务商类型" prop="serviceTypes">
          <u-checkbox-group v-model="form.serviceTypes">
            <u-checkbox value="psp">PSP</u-checkbox>
            <u-checkbox value="esp">ESP</u-checkbox>
            <u-checkbox value="iso">ISO</u-checkbox>
          </u-checkbox-group>
        </u-form-item>
        <u-form-item label="营业执照" prop="licenseImage">
          <u-upload
            class="descriptions-edit-demo__upload"
            action="#"
            accept="image/*"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleLicenseChange"
          >
            <div class="descriptions-edit-demo__upload-trigger">
              <u-image
                class="descriptions-edit-demo__upload-image"
                :src="form.licenseImage"
                fit="cover"
              />
              <span>点击重新选择</span>
            </div>
          </u-upload>
        </u-form-item>
        <div class="descriptions-edit-demo__actions">
          <u-button @click="cancelEdit">取消</u-button>
          <u-button type="primary" @click="saveEdit">保存</u-button>
        </div>
      </u-form>
    </template>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { EditFilled } from '@uniboot/icons-vue'

import type { FormInstance, FormRules, UploadProps } from 'uniboot-ui'

interface CompanyInfo {
  companyName: string
  registerDate: string
  industry: string
  region: string
  contactName: string
  phone: string
  serviceTypes: string[]
  licenseImage: string
}

const editing = ref(false)
const formRef = ref<FormInstance>()

const data = reactive<CompanyInfo>({
  companyName: 'xxxxxxx有限公司',
  registerDate: '2023年1月',
  industry: '服务业',
  region: '西南',
  contactName: '李四',
  phone: '18972334956',
  serviceTypes: ['psp', 'esp'],
  licenseImage: 'https://picsum.photos/200/260?random=2',
})

const form = reactive<CompanyInfo>({ ...data })

const rules: FormRules<CompanyInfo> = {
  companyName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
  industry: [{ required: true, message: '请选择行业', trigger: 'change' }],
  contactName: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
  serviceTypes: [
    {
      required: true,
      type: 'array',
      message: '请选择服务商类型',
      trigger: 'change',
    },
  ],
}

const startEdit = () => {
  Object.assign(form, data)
  editing.value = true
}

const cancelEdit = () => {
  Object.assign(form, data)
  editing.value = false
}

const saveEdit = async () => {
  if (!formRef.value) return
  await formRef.value.validate()
  Object.assign(data, form)
  editing.value = false
}

const handleLicenseChange: UploadProps['onChange'] = (uploadFile) => {
  if (!uploadFile.raw) return
  form.licenseImage = URL.createObjectURL(uploadFile.raw)
}
</script>

<style scoped>
.descriptions-edit-demo {
  box-sizing: border-box;
  width: 100%;
}

.descriptions-edit-demo__header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.descriptions-edit-demo__header .descriptions-edit-demo__title {
  color: var(--u-text-color-primary);
  font-size: 20px;
  font-weight: 500;
}

.descriptions-edit-demo__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0;
  color: #32c5ff;
  vertical-align: -2px;
}

.descriptions-edit-demo__edit :deep(.u-icon),
.descriptions-edit-demo__edit :deep(svg) {
  width: 20px;
  height: 20px;
}

.descriptions-edit-demo__tag {
  margin-right: 6px;
}

.descriptions-edit-demo__license-image {
  width: 120px;
  height: 150px;
  border-radius: 4px;
}

.descriptions-edit-demo__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
}

.descriptions-edit-demo__actions {
  grid-column: 1 / -1;
}

.descriptions-edit-demo__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.descriptions-edit-demo__upload {
  display: inline-block;
}

.descriptions-edit-demo__upload-trigger {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 120px;
  padding: 8px;
  color: var(--u-text-color-secondary);
  border: 1px dashed var(--u-border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color var(--u-transition-duration-fast);
}

.descriptions-edit-demo__upload-trigger:hover {
  border-color: var(--u-color-primary);
}

.descriptions-edit-demo__upload-image {
  width: 96px;
  height: 120px;
  border-radius: 4px;
}
</style>

尺寸

LargeDefaultSmall

With border

Username	kooriookami	Telephone	18100000000	Place	Suzhou
Remarks		Address	No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Without border

Usernamekooriookami

Telephone18100000000

PlaceSuzhou

Remarks

Address No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

vue

<template>
  <u-radio-group v-model="size">
    <u-radio value="large">Large</u-radio>
    <u-radio value="default">Default</u-radio>
    <u-radio value="small">Small</u-radio>
  </u-radio-group>

  <u-descriptions
    class="margin-top"
    title="With border"
    :column="3"
    :size="size"
    border
  >
    <template #extra>
      <u-button type="primary">Operation</u-button>
    </template>
    <u-descriptions-item>
      <template #label>
        <div class="cell-item">
          <u-icon :style="iconStyle">
            <user />
          </u-icon>
          Username
        </div>
      </template>
      kooriookami
    </u-descriptions-item>
    <u-descriptions-item>
      <template #label>
        <div class="cell-item">
          <u-icon :style="iconStyle">
            <iphone />
          </u-icon>
          Telephone
        </div>
      </template>
      18100000000
    </u-descriptions-item>
    <u-descriptions-item>
      <template #label>
        <div class="cell-item">
          <u-icon :style="iconStyle">
            <location />
          </u-icon>
          Place
        </div>
      </template>
      Suzhou
    </u-descriptions-item>
    <u-descriptions-item>
      <template #label>
        <div class="cell-item">
          <u-icon :style="iconStyle">
            <tickets />
          </u-icon>
          Remarks
        </div>
      </template>
      <u-tag size="small">School</u-tag>
    </u-descriptions-item>
    <u-descriptions-item>
      <template #label>
        <div class="cell-item">
          <u-icon :style="iconStyle">
            <office-building />
          </u-icon>
          Address
        </div>
      </template>
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </u-descriptions-item>
  </u-descriptions>

  <u-descriptions
    class="margin-top"
    title="Without border"
    :column="3"
    :size="size"
    :style="blockMargin"
  >
    <template #extra>
      <u-button type="primary">Operation</u-button>
    </template>
    <u-descriptions-item label="Username">kooriookami</u-descriptions-item>
    <u-descriptions-item label="Telephone">18100000000</u-descriptions-item>
    <u-descriptions-item label="Place">Suzhou</u-descriptions-item>
    <u-descriptions-item label="Remarks">
      <u-tag size="small">School</u-tag>
    </u-descriptions-item>
    <u-descriptions-item label="Address">
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </u-descriptions-item>
  </u-descriptions>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from '@uniboot/icons-vue'

import type { ComponentSize } from 'uniboot-ui'

const size = ref<ComponentSize>('default')

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  }
})
</script>

<style scoped>
.u-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>

垂直列表

LargeDefaultSmall

Vertical list with border

Username	Telephone	Place
kooriookami	18100000000	Suzhou
Remarks	Address
	No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Vertical list without border

Usernamekooriookami

Telephone18100000000

PlaceSuzhou

Remarks

Address No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

跨行

Width horizontal list

Photo		Username	kooriookami	Telephone	18100000000
Photo		Place	Suzhou	Remarks
Address	No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

Width vertical list

Photo	Username	Telephone
	kooriookami	18100000000
	Place	Remarks
	Suzhou
Address
No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

自定义样式

Customized style list

Username	kooriookami	Telephone	18100000000	Place	Suzhou
Remarks		Address	No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province

描述列表 API

描述列表属性

名称	说明	类型	默认值
border	是否带边框	`boolean`	false
column	一行展示的 `Descriptions Item` 数量；无边框模式未设置时按容器宽度响应（最多 4 列）；有边框模式未设置时默认为 3	`number`	—
direction	排列方向	`enum`	horizontal
size	列表尺寸	`enum`	—
title	左上角标题文案	`string`	''
extra	右上角额外区域文案	`string`	''
label-width	标签统一宽度	`string` / `number`	—
label-align	标签统一对齐方式，可被 `Descriptions Item` 的 `label-align` 覆盖	`enum`	—

Descriptions 插槽

名称	说明	子标签
default	自定义默认内容	Descriptions Item
title	自定义标题区域	—
extra	自定义右上角	—

描述列表项 API

描述列表项属性

名称	说明	类型	默认值
label	标签文本	`string`	''
span	列占位（ colspan / grid 列跨度）	`number`	1
rowspan	跨行数（仅 `border` 模式生效，无边框 grid 模式暂不支持）	`number`	1
width	列宽；同一列多行时取最大宽度（仅 `border` 模式生效，无边框 grid 模式列宽由 grid 均分，请用 `label-width` 控制标签列）	`string` / `number`	''
min-width	列最小宽度；设了 `width` 的列为固定宽，仅设 `min-width` 的列按比例分配（仅 `border` 模式生效）	`string` / `number`	''
label-width	当前项标签宽度；未设置时与同列一致；优先级高于 `Descriptions` 的 `label-width`	`string` / `number`	—
label-tooltip	标签提示文案，在 label 后展示 Tip 图标，悬停显示 tooltip	`string`	''
align	内容对齐（无 `border` 时同时作用于标签与内容）	`enum`	left
label-align	当前项标签对齐方式；优先级高于 `Descriptions` 的 `label-align`	`enum`	—
class-name	内容单元格自定义类名	`string`	''
label-class-name	标签单元格自定义类名	`string`	''

描述列表项插槽

名称	说明
default	自定义默认内容
label	自定义标签

Collapse 折叠面板

Empty 空状态

Descriptions 描述列表 ​

基础用法 ​

单列样式 ​

结合表单 ​

尺寸 ​

垂直列表 ​

跨行 ​

自定义样式 ​

描述列表 API ​

描述列表 属性 ​

Descriptions 插槽 ​

描述列表项 API ​

描述列表项 属性 ​

描述列表项 插槽 ​

Descriptions 描述列表

基础用法

单列样式

结合表单

尺寸

垂直列表

跨行

自定义样式

描述列表 API

描述列表属性

Descriptions 插槽

描述列表项 API

描述列表项属性

描述列表项插槽