FxDescriptions 描述列表

列表形式展示字段与值，支持 column 列数切分、direction 方向、border 边框、size 尺寸、title / extra 标题与操作区，以及 item 级 span / rowspan / width / align 等细粒度控制。

基础用法

<template>
  <FxDescriptions title="用户信息">
    <FxDescriptionsItem label="用户名">kooriookami</FxDescriptionsItem>
    <FxDescriptionsItem label="手机号">18100000000</FxDescriptionsItem>
    <FxDescriptionsItem label="地区">苏州</FxDescriptionsItem>
    <FxDescriptionsItem label="备注">
      <FxTag size="small">学校</FxTag>
    </FxDescriptionsItem>
    <FxDescriptionsItem label="地址">
      江苏省苏州市吴中区吴中大道 1188 号
    </FxDescriptionsItem>
  </FxDescriptions>
</template>

尺寸

通过 size 配合 border 切换尺寸，#extra 插槽放置操作按钮，#label 插槽自定义 label（含图标）。

<template>
  <FxRadioGroup v-model="size">
    <FxRadio value="large">Large</FxRadio>
    <FxRadio value="default">Default</FxRadio>
    <FxRadio value="small">Small</FxRadio>
  </FxRadioGroup>

  <FxDescriptions class="margin-top" title="带边框" :column="3" :size="size" border>
    <template #extra>
      <FxBtn type="primary">操作</FxBtn>
    </template>
    <FxDescriptionsItem>
      <template #label>
        <div class="cell-item">
          <FxIcon name="ep:user" size="1em" :style="iconStyle" />
          用户名
        </div>
      </template>
      kooriookami
    </FxDescriptionsItem>
    <FxDescriptionsItem>
      <template #label>
        <div class="cell-item">
          <FxIcon name="ep:iphone" size="1em" :style="iconStyle" />
          手机号
        </div>
      </template>
      18100000000
    </FxDescriptionsItem>
    <FxDescriptionsItem>
      <template #label>
        <div class="cell-item">
          <FxIcon name="ep:location" size="1em" :style="iconStyle" />
          地区
        </div>
      </template>
      苏州
    </FxDescriptionsItem>
    <FxDescriptionsItem>
      <template #label>
        <div class="cell-item">
          <FxIcon name="ep:tickets" size="1em" :style="iconStyle" />
          备注
        </div>
      </template>
      <FxTag size="small">学校</FxTag>
    </FxDescriptionsItem>
    <FxDescriptionsItem>
      <template #label>
        <div class="cell-item">
          <FxIcon name="ep:office-building" size="1em" :style="iconStyle" />
          地址
        </div>
      </template>
      江苏省苏州市吴中区吴中大道 1188 号
    </FxDescriptionsItem>
  </FxDescriptions>

  <FxDescriptions
    class="margin-top"
    title="无边框"
    :column="3"
    :size="size"
    :style="blockMargin"
  >
    <template #extra>
      <FxBtn type="primary">操作</FxBtn>
    </template>
    <FxDescriptionsItem label="用户名">kooriookami</FxDescriptionsItem>
    <FxDescriptionsItem label="手机号">18100000000</FxDescriptionsItem>
    <FxDescriptionsItem label="地区">苏州</FxDescriptionsItem>
    <FxDescriptionsItem label="备注">
      <FxTag size="small">学校</FxTag>
    </FxDescriptionsItem>
    <FxDescriptionsItem label="地址">
      江苏省苏州市吴中区吴中大道 1188 号
    </FxDescriptionsItem>
  </FxDescriptions>
</template>

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

const size = ref<"large" | "default" | "small">("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>
.fx-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>

竖直列表

direction="vertical" 时 label 与 content 上下排列，:span="2" 跨列。

<template>
  <FxRadioGroup v-model="size">
    <FxRadio value="large">Large</FxRadio>
    <FxRadio value="default">Default</FxRadio>
    <FxRadio value="small">Small</FxRadio>
  </FxRadioGroup>

  <FxDescriptions
    title="竖直带边框"
    direction="vertical"
    :column="4"
    :size="size"
    border
  >
    <FxDescriptionsItem label="用户名">kooriookami</FxDescriptionsItem>
    <FxDescriptionsItem label="手机号">18100000000</FxDescriptionsItem>
    <FxDescriptionsItem label="地区" :span="2">苏州</FxDescriptionsItem>
    <FxDescriptionsItem label="备注">
      <FxTag size="small">学校</FxTag>
    </FxDescriptionsItem>
    <FxDescriptionsItem label="地址">
      江苏省苏州市吴中区吴中大道 1188 号
    </FxDescriptionsItem>
  </FxDescriptions>

  <FxDescriptions
    title="竖直无边框"
    :column="4"
    :size="size"
    direction="vertical"
    :style="blockMargin"
  >
    <FxDescriptionsItem label="用户名">kooriookami</FxDescriptionsItem>
    <FxDescriptionsItem label="手机号">18100000000</FxDescriptionsItem>
    <FxDescriptionsItem label="地区" :span="2">苏州</FxDescriptionsItem>
    <FxDescriptionsItem label="备注">
      <FxTag size="small">学校</FxTag>
    </FxDescriptionsItem>
    <FxDescriptionsItem label="地址">
      江苏省苏州市吴中区吴中大道 1188 号
    </FxDescriptionsItem>
  </FxDescriptions>
</template>

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

const size = ref<"large" | "default" | "small">("default")

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

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

跨行

:rowspan="2" 跨行，horizontal 与 vertical 两种方向下的效果。

<template>
  <FxDescriptions title="水平列表跨行" border>
    <FxDescriptionsItem
      :rowspan="2"
      :width="140"
      label="头像"
      align="center"
    >
      <FxImage
        style="width: 100px; height: 100px"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
    </FxDescriptionsItem>
    <FxDescriptionsItem label="用户名">kooriookami</FxDescriptionsItem>
    <FxDescriptionsItem label="手机号">18100000000</FxDescriptionsItem>
    <FxDescriptionsItem label="地区">苏州</FxDescriptionsItem>
    <FxDescriptionsItem label="备注">
      <FxTag size="small">学校</FxTag>
    </FxDescriptionsItem>
    <FxDescriptionsItem label="地址">
      江苏省苏州市吴中区吴中大道 1188 号
    </FxDescriptionsItem>
  </FxDescriptions>

  <FxDescriptions
    title="竖直列表跨行"
    direction="vertical"
    border
    style="margin-top: 20px"
  >
    <FxDescriptionsItem
      :rowspan="2"
      :width="140"
      label="头像"
      align="center"
    >
      <FxImage
        style="width: 100px; height: 100px"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
    </FxDescriptionsItem>
    <FxDescriptionsItem label="用户名">kooriookami</FxDescriptionsItem>
    <FxDescriptionsItem label="手机号">18100000000</FxDescriptionsItem>
    <FxDescriptionsItem label="地区">苏州</FxDescriptionsItem>
    <FxDescriptionsItem label="备注">
      <FxTag size="small">学校</FxTag>
    </FxDescriptionsItem>
    <FxDescriptionsItem label="地址">
      江苏省苏州市吴中区吴中大道 1188 号
    </FxDescriptionsItem>
  </FxDescriptions>
</template>

自定义样式

通过 label-align / align / label-class-name / class-name / width 自定义样式。

<template>
  <FxDescriptions title="自定义样式列表" :column="3" border>
    <FxDescriptionsItem
      label="用户名"
      label-align="right"
      align="center"
      label-class-name="my-label"
      class-name="my-content"
      width="150px"
    >
      kooriookami
    </FxDescriptionsItem>
    <FxDescriptionsItem label="手机号" label-align="right" align="center">
      18100000000
    </FxDescriptionsItem>
    <FxDescriptionsItem label="地区" label-align="right" align="center">
      苏州
    </FxDescriptionsItem>
    <FxDescriptionsItem label="备注" label-align="right" align="center">
      <FxTag size="small">学校</FxTag>
    </FxDescriptionsItem>
    <FxDescriptionsItem label="地址" label-align="right" align="center">
      江苏省苏州市吴中区吴中大道 1188 号
    </FxDescriptionsItem>
  </FxDescriptions>
</template>

<style scoped>
:deep(.my-label) {
  background: var(--fx-color-success-light-9) !important;
}
:deep(.my-content) {
  background: var(--fx-color-danger-light-9);
}
</style>

Descriptions API

Attributes

属性	说明	类型	默认值
border	是否显示边框（带边框时 label / content 分列两单元格）	boolean	false
column	一行内 Descriptions Item 的数量	number	3
direction	列表方向	'horizontal' | 'vertical'	'horizontal'
size	列表尺寸，省略时走 form / config-provider	'large' | 'default' | 'small' | ''	''
title	标题文字，显示在左上	string	''
extra	操作区文字，显示在右上	string	''
labelWidth	每列 label 的宽度，优先级低于 item 自身的 labelWidth	string | number	—

Slots

插槽名	说明
default	放置 FxDescriptionsItem 子项
title	自定义标题，替代 title prop
extra	自定义操作区，替代 extra prop

DescriptionsItem API

Attributes

属性	说明	类型	默认值
label	label 文字	string	''
span	该 item 跨多少列（colspan）	number	1
rowspan	该 item 跨多少行（仅 horizontal + border 下生效）	number	1
width	列宽（同一列取最大值；无 border 时含 label + content）	string | number	''
minWidth	列最小宽度（按比例分配，有 width 的列固定）	string | number	''
labelWidth	label 列宽，优先级高于父 Descriptions 的 labelWidth	string | number	—
align	content 对齐；无 border 时同时作用于 label	'left' | 'center' | 'right'	'left'
labelAlign	label 对齐，省略时回退到 align	'left' | 'center' | 'right'	—
className	content 自定义类名	string	''
labelClassName	label 自定义类名	string	''

Slots

插槽名	说明
default	自定义 content
label	自定义 label（含图标等富内容）