Descriptions 描述列表

列表形式展示多个字段。

基础用法

带边框

姓名	张三	性别	男	年龄	45 岁
门诊号	M20260928001	医保类型	本地医保	个人档案号	202207180236
就诊科室	心血管内科	主治医师	李明	过敏史	青霉素过敏
诊断结果	原发性高血压

不同尺寸

LargeDefaultSmallMini

带边框

姓名	张三	联系电话	13810241988	就诊科室	心血管内科
过敏史		家庭住址	安徽省合肥市蜀山区某某社区某某花园 234 号

无边框

姓名张三	联系电话13810241988	就诊科室心血管内科
过敏史	家庭住址安徽省合肥市蜀山区某某社区某某花园 234 号

vue

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

  <w-descriptions class="margin-top" title="带边框" :column="3" :size="size">
    <template #extra>
      <w-button type="primary">操作</w-button>
    </template>
    <w-descriptions-item>
      <template #label>
        <div class="cell-item">
          <w-icon :style="iconStyle">
            <user />
          </w-icon>
          姓名
        </div>
      </template>
      张三
    </w-descriptions-item>
    <w-descriptions-item>
      <template #label>
        <div class="cell-item">
          <w-icon :style="iconStyle">
            <Mobile />
          </w-icon>
          联系电话
        </div>
      </template>
      13810241988
    </w-descriptions-item>
    <w-descriptions-item>
      <template #label>
        <div class="cell-item">
          <w-icon :style="iconStyle">
            <location />
          </w-icon>
          就诊科室
        </div>
      </template>
      心血管内科
    </w-descriptions-item>
    <w-descriptions-item>
      <template #label>
        <div class="cell-item">
          <w-icon :style="iconStyle">
            <bell />
          </w-icon>
          过敏史
        </div>
      </template>
      <w-tag size="small" type="danger">青霉素过敏</w-tag>
    </w-descriptions-item>
    <w-descriptions-item>
      <template #label>
        <div class="cell-item">
          <w-icon :style="iconStyle">
            <Home />
          </w-icon>
          家庭住址
        </div>
      </template>
      安徽省合肥市蜀山区某某社区某某花园 234 号
    </w-descriptions-item>
  </w-descriptions>

  <w-descriptions
    class="margin-top"
    title="无边框"
    :column="3"
    :border="false"
    :size="size"
    :style="blockMargin"
  >
    <template #extra>
      <w-button type="primary">操作</w-button>
    </template>
    <w-descriptions-item label="姓名">张三</w-descriptions-item>
    <w-descriptions-item label="联系电话">13810241988</w-descriptions-item>
    <w-descriptions-item label="就诊科室">心血管内科</w-descriptions-item>
    <w-descriptions-item label="过敏史">
      <w-tag size="small" type="danger">青霉素过敏</w-tag>
    </w-descriptions-item>
    <w-descriptions-item label="家庭住址">
      安徽省合肥市蜀山区某某社区某某花园 234 号
    </w-descriptions-item>
  </w-descriptions>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Bell, Home, Location, Mobile, User } from '@win-design-next/icons-vue'

import type { ComponentSize } from 'win-design-next'

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>
.w3-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>

垂直列表

LargeDefaultSmallMini

带边框纵向列表

姓名	联系电话	就诊科室
张三	13810241988	心血管内科
过敏史	家庭住址
	安徽省合肥市蜀山区某某社区某某花园 234 号

无边框纵向列表

姓名	联系电话	就诊科室
张三	13810241988	心血管内科
过敏史	家庭住址
	安徽省合肥市蜀山区某某社区某某花园 234 号

vue

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

  <w-descriptions
    title="带边框纵向列表"
    direction="vertical"
    :column="4"
    :size="size"
    border
  >
    <w-descriptions-item label="姓名">张三</w-descriptions-item>
    <w-descriptions-item label="联系电话">13810241988</w-descriptions-item>
    <w-descriptions-item label="就诊科室" :span="2"
      >心血管内科</w-descriptions-item
    >
    <w-descriptions-item label="过敏史">
      <w-tag size="small" type="danger">青霉素过敏</w-tag>
    </w-descriptions-item>
    <w-descriptions-item label="家庭住址">
      安徽省合肥市蜀山区某某社区某某花园 234 号
    </w-descriptions-item>
  </w-descriptions>

  <w-descriptions
    title="无边框纵向列表"
    :column="4"
    :size="size"
    direction="vertical"
    :border="false"
    :style="blockMargin"
  >
    <w-descriptions-item label="姓名">张三</w-descriptions-item>
    <w-descriptions-item label="联系电话">13810241988</w-descriptions-item>
    <w-descriptions-item label="就诊科室" :span="2"
      >心血管内科</w-descriptions-item
    >
    <w-descriptions-item label="过敏史">
      <w-tag size="small" type="danger">青霉素过敏</w-tag>
    </w-descriptions-item>
    <w-descriptions-item label="家庭住址">
      安徽省合肥市蜀山区某某社区某某花园 234 号
    </w-descriptions-item>
  </w-descriptions>
</template>

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

import type { ComponentSize } from 'win-design-next'

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

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

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

单元格跨行

横向跨行列表

患者照片		姓名	张三	联系电话	13810241988
患者照片		就诊科室	心血管内科	过敏史
诊断结果	原发性高血压	家庭住址	安徽省合肥市蜀山区某某社区某某花园 234 号

纵向跨行列表

患者照片	姓名	联系电话
	张三	13810241988
	就诊科室	过敏史
	心血管内科
诊断结果	家庭住址
原发性高血压	安徽省合肥市蜀山区某某社区某某花园 234 号

vue

<template>
  <w-descriptions title="横向跨行列表" border>
    <w-descriptions-item
      :rowspan="2"
      :width="140"
      label="患者照片"
      align="center"
    >
      <w-image
        style="width: 100px; height: 100px"
        src="https://cdn.dribbble.com/userupload/9645535/file/original-b7756b0958f420bef5cbf243c947f149.png?resize=752x"
      />
    </w-descriptions-item>
    <w-descriptions-item label="姓名">张三</w-descriptions-item>
    <w-descriptions-item label="联系电话">13810241988</w-descriptions-item>
    <w-descriptions-item label="就诊科室">心血管内科</w-descriptions-item>
    <w-descriptions-item label="过敏史">
      <w-tag size="small" type="danger">青霉素过敏</w-tag>
    </w-descriptions-item>
    <w-descriptions-item label="诊断结果">原发性高血压</w-descriptions-item>
    <w-descriptions-item label="家庭住址">
      安徽省合肥市蜀山区某某社区某某花园 234 号
    </w-descriptions-item>
  </w-descriptions>

  <w-descriptions
    title="纵向跨行列表"
    direction="vertical"
    border
    style="margin-top: 20px"
  >
    <w-descriptions-item
      :rowspan="2"
      :width="140"
      label="患者照片"
      align="center"
    >
      <w-image
        style="width: 100px; height: 100px"
        src="https://cdn.dribbble.com/userupload/9645535/file/original-b7756b0958f420bef5cbf243c947f149.png?resize=752x"
      />
    </w-descriptions-item>
    <w-descriptions-item label="姓名">张三</w-descriptions-item>
    <w-descriptions-item label="联系电话">13810241988</w-descriptions-item>
    <w-descriptions-item label="就诊科室">心血管内科</w-descriptions-item>
    <w-descriptions-item label="过敏史">
      <w-tag size="small" type="danger">青霉素过敏</w-tag>
    </w-descriptions-item>
    <w-descriptions-item label="诊断结果">原发性高血压</w-descriptions-item>
    <w-descriptions-item label="家庭住址">
      安徽省合肥市蜀山区某某社区某某花园 234 号
    </w-descriptions-item>
  </w-descriptions>
</template>

自定义样式

自定义样式列表

患者姓名	张三	联系电话	13810241988	就诊科室	心血管内科
过敏史		家庭住址	安徽省合肥市蜀山区某某社区某某花园 234 号

显示冒号 1.3.4

colon 控制标签文本后是否追加冒号，仅在无边框模式下生效；有边框模式不会输出冒号。

显示冒号

姓名张三	性别男	联系电话13810241988
医保类型本地医保	建档医生王五	个人档案号202207180236

姓名	张三	性别	男	联系电话	13810241988
医保类型	本地医保	建档医生	王五	个人档案号	202207180236

Descriptions API

Attributes

属性名	说明	类型	默认
border	是否带有边框	`boolean`	true
colon	是否显示冒号	`boolean`	true
column	一行 `Descriptions Item` 的数量	`number`	3
direction	排列的方向	`enum`	horizontal
size	列表的尺寸	`enum`	—
title	标题文本，显示在左上方	`string`	''
extra	操作区文本，显示在右上方	`string`	''
label-width	每一列的标签宽度	`string` / `number`	''

Slots

插槽名	说明	子标签
default	自定义默认内容	Descriptions Item
title	自定义标题，显示在左上方	—
extra	自定义操作区，显示在右上方	—

DescriptionsItem API

Attributes

属性名	说明	类型	默认
label	标签文本	`string`	''
span	列的数量	`number`	1
rowspan	单元格应该跨越的行数	`number`	1
width	列的宽度，不同行相同列的宽度按最大值设定（如无 `border` ，宽度包含标签与内容）	`string` / `number`	''
min-width	列的最小宽度，与 `width` 的区别是 `width` 是固定的，`min-width` 会把剩余宽度按比例分配给设置了 `min-width` 的列（如无 `border`，宽度包含标签与内容）	`string` / `number`	''
label-width	列标签宽，如果未设置，它将与列宽度相同。比 `Descriptions` 的 `label-width` 优先级高	`string` / `number`	''
align	列的内容对齐方式（如无 `border`，对标签和内容均生效）	`enum`	left
label-align	列的标签对齐方式，若不设置该项，则使用内容的对齐方式（如无 `border`，请使用 `align` 参数）	`enum`	''
class-name	列的内容自定义类名	`string`	''
label-class-name	column label custom class name	`string`	''

Slots

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

Collapse Trigger 折叠触发器

Empty 空状态

Descriptions 描述列表 ​

基础用法 ​

不同尺寸 ​

垂直列表 ​

单元格跨行 ​

自定义样式 ​

显示冒号 1.3.4 ​

Descriptions API ​

Attributes ​

Slots ​

DescriptionsItem API ​

Attributes ​

Slots ​

Descriptions 描述列表

基础用法

不同尺寸

垂直列表

单元格跨行

自定义样式

显示冒号 1.3.4

Descriptions API

Attributes

Slots

DescriptionsItem API

Attributes

Slots