gi-component

Appearance

Descriptions 描述列表 ​

基于 el-descriptions 封装，支持通过 columns + data 配置项快速渲染描述列表，也可使用默认插槽自定义内容。title、extra 支持插槽。

基本用法 ​

用户信息
姓名张三电话18100000000
邮箱1234567890@qq.com年龄18
性别男地址江苏省苏州市吴中区吴中大道 1188 号
城市广州区县天河区
爱好
打篮球
打游戏
看书
听音乐
看电影
备注这是一个备注
查看代码
vue
<template>
  <gi-card bordered title="用户信息">
    <template #extra>
      <el-button type="primary">编辑</el-button>
    </template>
    <gi-descriptions :columns="columns" :data="detail" border :column="2">
      <template #sex="{ value }">
        <ElTag :type="value === '男' ? 'primary' : 'danger'" size="small">{{ value }}</ElTag>
      </template>
    </gi-descriptions>
  </gi-card>
</template>

<script setup lang="ts">
import type { DescriptionsColumnItem } from 'gi-component'
import { ElSpace, ElTag } from 'element-plus'
import { h } from 'vue'

const columns: DescriptionsColumnItem[] = [
  { value: 'name', label: '姓名' },
  { value: 'tel', label: '电话' },
  { value: 'email', label: '邮箱' },
  { value: 'age', label: '年龄' },
  { value: 'sex', label: '性别' },
  { value: 'address', label: '地址' },
  { value: 'city', label: '城市' },
  { value: 'district', label: '区县' },
  {
    value: 'hobby',
    label: '爱好',
    render: ({ value }: { value: unknown }) =>
      h(
        ElSpace,
        null,
        () => (Array.isArray(value) ? value : [value]).map((item: string) =>
          h(ElTag, { type: 'primary', size: 'small' }, () => item)
        )
      )
  },
  { value: 'remark', label: '备注' }
]

const detail = {
  name: '张三',
  tel: '18100000000',
  address: '江苏省苏州市吴中区吴中大道 1188 号',
  email: '1234567890@qq.com',
  age: 18,
  sex: '男',
  city: '广州',
  district: '天河区',
  hobby: ['打篮球', '打游戏', '看书', '听音乐', '看电影'],
  remark: '这是一个备注'
}
</script>

插槽用法 ​

自定义标题
姓名张三电话18100000000
邮箱1234567890@qq.com年龄18
性别男地址江苏省苏州市吴中区吴中大道 1188 号
城市广州区县天河区
备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注
查看代码
vue
<template>
  <gi-card bordered :header-style="{ display: 'none' }">
    <gi-descriptions title="插槽用法" :columns="columns" :data="detail" border :column="2">
      <template #title>
        <span>自定义标题</span>
      </template>
      <template #extra>
        <el-button type="primary" size="small">操作</el-button>
      </template>
    </gi-descriptions>
  </gi-card>
</template>

<script setup lang="ts">
import type { DescriptionsColumnItem } from 'gi-component'

const columns: DescriptionsColumnItem[] = [
  { value: 'name', label: '姓名' },
  { value: 'tel', label: '电话' },
  { value: 'email', label: '邮箱' },
  { value: 'age', label: '年龄' },
  { value: 'sex', label: '性别' },
  { value: 'address', label: '地址' },
  { value: 'city', label: '城市' },
  { value: 'district', label: '区县' },
  { value: 'remark', label: '备注' }
]

const detail = {
  name: '张三',
  tel: '18100000000',
  address: '江苏省苏州市吴中区吴中大道 1188 号',
  email: '1234567890@qq.com',
  age: 18,
  sex: '男',
  city: '广州',
  district: '天河区',
  hobby: ['打篮球', '打游戏', '看书', '听音乐', '看电影'],
  remark: '这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注这是一个备注'
}
</script>

API ​

Descriptions Props ​

属性名说明类型可选值默认值
columns描述列表配置项DescriptionsColumnItem[]--
data详情数据（与 columns 配合）Object--
border是否带有边框boolean-false
column一行 Descriptions Item 的数量number-3
direction排列的方向stringvertical / horizontalhorizontal
size列表的尺寸stringlarge / default / smalldefault
title标题文本，显示在左上方string--
extra操作区文本，显示在右上方string--

Columns 配置项（columns 数组元素） ​

属性名说明类型可选值默认值
value对应 data 的字段名string--
label标签文本，或 (DescriptionsColumnItem) => VNodestring / Function--
span列的数量number-1
width列宽度（无 border 时含标签与内容）string / number--
minWidth列最小宽度，剩余宽度按比例分配string / number--
align列内容对齐方式stringleft / center / rightleft
labelAlign列标签对齐方式（无 border 时用 align）stringleft / center / right-
className列内容自定义类名string--
labelClassName列标签自定义类名string--
render自定义渲染内容 ({value, data, column}) => VNodeFunction--