Tu View PlusDescriptions 描述列表
列表形式展示多个字段。
基础用法
用户信息
| 姓名汤姆 | 手机号18100000000 | 地点合肥 |
| 备注学校 | 住址安徽省合肥市高新区 | |
<template>
<tu-descriptions title="用户信息">
<tu-descriptions-item label="姓名">汤姆</tu-descriptions-item>
<tu-descriptions-item label="手机号">18100000000</tu-descriptions-item>
<tu-descriptions-item label="地点">合肥</tu-descriptions-item>
<tu-descriptions-item label="备注">学校</tu-descriptions-item>
<tu-descriptions-item label="住址">安徽省合肥市高新区</tu-descriptions-item>
</tu-descriptions>
</template><template>
<tu-descriptions title="用户信息">
<tu-descriptions-item label="姓名">汤姆</tu-descriptions-item>
<tu-descriptions-item label="手机号">18100000000</tu-descriptions-item>
<tu-descriptions-item label="地点">合肥</tu-descriptions-item>
<tu-descriptions-item label="备注">学校</tu-descriptions-item>
<tu-descriptions-item label="住址">安徽省合肥市高新区</tu-descriptions-item>
</tu-descriptions>
</template>不同尺寸
有边框
姓名 | 汤姆 | 手机号 | 18100000000 | 地点 | 合肥 |
|---|---|---|---|---|---|
| 备注 | 学校 | 住址 | 安徽省合肥市高新区 | ||
无边框
姓名 汤姆 | 手机号18100000000 | 地点合肥 |
| 备注学校 | 住址安徽省合肥市高新区 | |
<template>
<tu-radio-group v-model="size">
<tu-radio label="mini">超小</tu-radio>
<tu-radio label="small">较小</tu-radio>
<tu-radio label="medium">默认</tu-radio>
<tu-radio label="large">较大</tu-radio>
</tu-radio-group>
<tu-descriptions class="mt-2" title="有边框" :column="3" :size="size" border>
<template #extra>
<tu-button :size="size">操作</tu-button>
</template>
<tu-descriptions-item>
<template #label>
<div class="demo-descritions-cell-item">
<tu-icon>
<UserFilled />
</tu-icon>
姓名
</div>
</template>
汤姆
</tu-descriptions-item>
<tu-descriptions-item label="手机号">18100000000</tu-descriptions-item>
<tu-descriptions-item label="地点">合肥</tu-descriptions-item>
<tu-descriptions-item label="备注">学校</tu-descriptions-item>
<tu-descriptions-item label="住址">安徽省合肥市高新区</tu-descriptions-item>
</tu-descriptions>
<tu-descriptions class="mt-2" title="无边框" :column="3" :size="size">
<template #extra>
<tu-button :size="size">操作</tu-button>
</template>
<tu-descriptions-item>
<template #label>
<div class="demo-descritions-cell-item">
<tu-icon>
<UserFilled />
</tu-icon>
姓名
</div>
</template>
汤姆
</tu-descriptions-item>
<tu-descriptions-item label="手机号">18100000000</tu-descriptions-item>
<tu-descriptions-item label="地点">合肥</tu-descriptions-item>
<tu-descriptions-item label="备注">学校</tu-descriptions-item>
<tu-descriptions-item label="住址">安徽省合肥市高新区</tu-descriptions-item>
</tu-descriptions>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { UserFilled } from '@tu-view-plus/icons-vue';
const size = ref('medium');
</script>
<style lang="scss" scoped>
.demo-descritions-cell-item {
display: inline-flex;
align-items: center;
> .tu-icon {
margin-right: 6px;
}
}
</style><template>
<tu-radio-group v-model="size">
<tu-radio label="mini">超小</tu-radio>
<tu-radio label="small">较小</tu-radio>
<tu-radio label="medium">默认</tu-radio>
<tu-radio label="large">较大</tu-radio>
</tu-radio-group>
<tu-descriptions class="mt-2" title="有边框" :column="3" :size="size" border>
<template #extra>
<tu-button :size="size">操作</tu-button>
</template>
<tu-descriptions-item>
<template #label>
<div class="demo-descritions-cell-item">
<tu-icon>
<UserFilled />
</tu-icon>
姓名
</div>
</template>
汤姆
</tu-descriptions-item>
<tu-descriptions-item label="手机号">18100000000</tu-descriptions-item>
<tu-descriptions-item label="地点">合肥</tu-descriptions-item>
<tu-descriptions-item label="备注">学校</tu-descriptions-item>
<tu-descriptions-item label="住址">安徽省合肥市高新区</tu-descriptions-item>
</tu-descriptions>
<tu-descriptions class="mt-2" title="无边框" :column="3" :size="size">
<template #extra>
<tu-button :size="size">操作</tu-button>
</template>
<tu-descriptions-item>
<template #label>
<div class="demo-descritions-cell-item">
<tu-icon>
<UserFilled />
</tu-icon>
姓名
</div>
</template>
汤姆
</tu-descriptions-item>
<tu-descriptions-item label="手机号">18100000000</tu-descriptions-item>
<tu-descriptions-item label="地点">合肥</tu-descriptions-item>
<tu-descriptions-item label="备注">学校</tu-descriptions-item>
<tu-descriptions-item label="住址">安徽省合肥市高新区</tu-descriptions-item>
</tu-descriptions>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { UserFilled } from '@tu-view-plus/icons-vue';
const size = ref('medium');
</script>
<style lang="scss" scoped>
.demo-descritions-cell-item {
display: inline-flex;
align-items: center;
> .tu-icon {
margin-right: 6px;
}
}
</style>垂直列表
有边框
| 姓名 | 手机号 | 地点 | |
|---|---|---|---|
| 汤姆 | 18100000000 | 合肥 | |
| 备注 | 住址 | ||
| 学校 | 安徽省合肥市高新区 | ||
无边框
| 姓名 | 手机号 | 地点 | |
|---|---|---|---|
| 汤姆 | 18100000000 | 合肥 | |
| 备注 | 住址 | ||
| 学校 | 安徽省合肥市高新区 | ||
<template>
<tu-radio-group v-model="size">
<tu-radio label="mini">超小</tu-radio>
<tu-radio label="small">较小</tu-radio>
<tu-radio label="medium">默认</tu-radio>
<tu-radio label="large">较大</tu-radio>
</tu-radio-group>
<tu-descriptions
class="mt-2"
title="有边框"
direction="vertical"
border
:column="4"
:size="size"
>
<tu-descriptions-item label="姓名">汤姆</tu-descriptions-item>
<tu-descriptions-item label="手机号">18100000000</tu-descriptions-item>
<tu-descriptions-item label="地点" :span="2">合肥</tu-descriptions-item>
<tu-descriptions-item label="备注">学校</tu-descriptions-item>
<tu-descriptions-item label="住址">安徽省合肥市高新区</tu-descriptions-item>
</tu-descriptions>
<tu-descriptions
class="mt-2"
title="无边框"
:column="4"
:size="size"
direction="vertical"
>
<tu-descriptions-item label="姓名">汤姆</tu-descriptions-item>
<tu-descriptions-item label="手机号">18100000000</tu-descriptions-item>
<tu-descriptions-item label="地点" :span="2">合肥</tu-descriptions-item>
<tu-descriptions-item label="备注">学校</tu-descriptions-item>
<tu-descriptions-item label="住址">安徽省合肥市高新区</tu-descriptions-item>
</tu-descriptions>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const size = ref('medium');
</script><template>
<tu-radio-group v-model="size">
<tu-radio label="mini">超小</tu-radio>
<tu-radio label="small">较小</tu-radio>
<tu-radio label="medium">默认</tu-radio>
<tu-radio label="large">较大</tu-radio>
</tu-radio-group>
<tu-descriptions
class="mt-2"
title="有边框"
direction="vertical"
border
:column="4"
:size="size"
>
<tu-descriptions-item label="姓名">汤姆</tu-descriptions-item>
<tu-descriptions-item label="手机号">18100000000</tu-descriptions-item>
<tu-descriptions-item label="地点" :span="2">合肥</tu-descriptions-item>
<tu-descriptions-item label="备注">学校</tu-descriptions-item>
<tu-descriptions-item label="住址">安徽省合肥市高新区</tu-descriptions-item>
</tu-descriptions>
<tu-descriptions
class="mt-2"
title="无边框"
:column="4"
:size="size"
direction="vertical"
>
<tu-descriptions-item label="姓名">汤姆</tu-descriptions-item>
<tu-descriptions-item label="手机号">18100000000</tu-descriptions-item>
<tu-descriptions-item label="地点" :span="2">合肥</tu-descriptions-item>
<tu-descriptions-item label="备注">学校</tu-descriptions-item>
<tu-descriptions-item label="住址">安徽省合肥市高新区</tu-descriptions-item>
</tu-descriptions>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const size = ref('medium');
</script>自定义样式
自定义样式
| 姓名 | 汤姆 | 手机号 | 18100000000 | 地点 | 合肥 |
|---|---|---|---|---|---|
| 备注 | 学校 | 住址 | 安徽省合肥市高新区 | ||
<template>
<tu-descriptions title="自定义样式" :column="3" border>
<tu-descriptions-item
label="姓名"
label-align="right"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
汤姆
</tu-descriptions-item>
<tu-descriptions-item label="手机号" label-align="right" align="center">
18100000000
</tu-descriptions-item>
<tu-descriptions-item label="地点" label-align="right" align="center">
合肥
</tu-descriptions-item>
<tu-descriptions-item label="备注" label-align="right" align="center">
学校
</tu-descriptions-item>
<tu-descriptions-item label="住址" label-align="right" align="center">
安徽省合肥市高新区
</tu-descriptions-item>
</tu-descriptions>
</template>
<style scoped>
:deep(.my-label) {
color: #5e7ce0 !important;
}
:deep(.my-content) {
color: #fa9841 !important;
}
</style><template>
<tu-descriptions title="自定义样式" :column="3" border>
<tu-descriptions-item
label="姓名"
label-align="right"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
汤姆
</tu-descriptions-item>
<tu-descriptions-item label="手机号" label-align="right" align="center">
18100000000
</tu-descriptions-item>
<tu-descriptions-item label="地点" label-align="right" align="center">
合肥
</tu-descriptions-item>
<tu-descriptions-item label="备注" label-align="right" align="center">
学校
</tu-descriptions-item>
<tu-descriptions-item label="住址" label-align="right" align="center">
安徽省合肥市高新区
</tu-descriptions-item>
</tu-descriptions>
</template>
<style scoped>
:deep(.my-label) {
color: #5e7ce0 !important;
}
:deep(.my-content) {
color: #fa9841 !important;
}
</style>Descriptions API
Descriptions Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| border | 是否带有边框 | Boolean | false |
| column | 一行Descriptions Item的数量 | Number | 3 |
| direction | 排列的方向 | String | horizontal |
| size | 列表的尺寸 | String | medium |
| title | 标题文本，显示在左上方 | String | - |
| extra | 操作区文本，显示在右上方 | String | - |
Descriptions Slots
| 参数名 | 描述 | 默认值 |
|---|---|---|
| default | 自定义默认内容 | Descriptions Item |
| title | 自定义标题，显示在左上方 | - |
| extra | 自定义操作区，显示在右上方 | - |
DescriptionsItem API
DescriptionsItem Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| label | 标签文本 | String | - |
| span | 列的数量 | Number | 1 |
| width | 列的宽度，不同行相同列的宽度按最大值设定(如无border，宽度包含标签与内容) | String Number | - |
| min-width | 列的最小宽度，与width的区别是width是固定的，min-width会把剩余宽度按比例分配给设置了min-width的列(如无border，宽度包含标签与内容) | String Number | - |
| align | 列的内容对齐方式(如无border，对标签与内容均生效) | String | left |
| label-align | 列的标签对齐方式，若不设置该项，则使用内容的对齐方式(如无border，请使用align参数) | String | - |
| class-name | 列的内容自定义类名 | String | - |
| label-class-name | 列标签自定义类名 | String | - |
DescriptionsItem Slots
| 参数名 | 描述 | 默认值 |
|---|---|---|
| default | 自定义默认内容 | - |
| label | 自定义标签 | - |