Descriptions 描述列表

EasyDescriptions 是基于 Element Plus Descriptions 组件封装的增强版本,支持分组、动态组件、条件渲染等功能。

在线演示

基础用法

用户名		性别	女 男
年龄	25	手机号	18100000000
邮箱		地址	上海市普陀区金沙江路 1518 弄

分组模式

基本信息

用户名	张三	性别	男
年龄	25	手机号	18100000000

联系方式

邮箱	zhangsan@example.com
地址	上海市普陀区金沙江路 1518 弄

VIP 信息

VIP 等级

Gold

备注

<template>
  <div class="descriptions-demo">
    <h3>基础用法</h3>
    <easy-descriptions :items="basicItems" v-model="formData" :column="2" border> </easy-descriptions>

    <h3 style="margin-top: 30px">分组模式</h3>
    <easy-descriptions :items="groupedItems" v-model="formData" border>
      <template #gender>
        <el-tag type="success" size="large">
          {{ formData.gender == 1 ? "男" : "女" }}
        </el-tag>
      </template>
    </easy-descriptions>

    <div class="actions">
      <el-button type="primary" @click="handleSubmit">提交数据</el-button>
    </div>

    <div v-if="submitResult" class="result">
      <strong>提交的数据：</strong>
      <pre>{{ submitResult }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { EasyDescriptions } from "easy-elplus"
import { ElMessage, ElButton } from "element-plus"

const formData = ref({
  username: "张三",
  gender: 1,
  age: 25,
  tel: "18100000000",
  email: "zhangsan@example.com",
  address: "上海市普陀区金沙江路 1518 弄",
  isVip: true,
  vipLevel: "Gold",
  remark: "这是一个备注信息"
})

const submitResult = ref("")

// 基础配置
const basicItems = [
  {
    label: "用户名",
    value: {
      id: "username",
      components: "el-input",
      props: {
        placeholder: "请输入用户名"
      }
    }
  },
  {
    label: "性别",
    value: {
      id: "gender",
      components: "el-switch",
      props: {
        activeText: "男",
        inactiveText: "女",
        activeValue: 1,
        inactiveValue: 0
      }
    }
  },

  { label: "年龄", value: "age", hidden: data => data.gender == 0 },
  { label: "手机号", value: "tel" },
  {
    label: "邮箱",
    value: {
      id: "email",
      components: "el-input",
      props: {
        placeholder: "请输入邮箱"
      }
    }
  },
  { label: "地址", value: "address", span: 2 }
]

// 分组配置
const groupedItems = [
  {
    title: "基本信息",
    column: 2,
    items: [
      { label: "用户名", value: "username" },
      {
        label: "性别",
        value: "gender"
      },
      { label: "年龄", value: "age" },
      { label: "手机号", value: "tel" }
    ]
  },
  {
    title: "联系方式",
    column: 1,
    items: [
      { label: "邮箱", value: "email" },
      { label: "地址", value: "address" }
    ]
  },
  {
    title: "VIP 信息",
    hidden: data => !data.isVip,
    column: 2,
    items: [
      { label: "VIP 等级", value: "vipLevel" },
      {
        label: "备注",
        value: {
          id: "remark",
          components: "el-input",
          props: {
            type: "textarea",
            rows: 3
          }
        },
        span: 2
      }
    ]
  }
]

const handleSubmit = () => {
  submitResult.value = JSON.stringify(formData.value, null, 2)
  ElMessage.success("提交成功")
}
</script>

<style scoped>
h3 {
  margin: 20px 0 10px;
  font-size: 16px;
  color: #303133;
}

.result {
  margin-top: 20px;
  padding: 12px;
  background: #f0f9ff;
  border: 1px solid #409eff;
  border-radius: 4px;
  color: #409eff;
  font-size: 14px;
}

.result pre {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
}
</style>

API

Attributes

参数	说明	类型	默认值
items	描述列表配置	Array	[]
modelValue / v-model	绑定的数据对象	Object	{}

继承 Element Plus Descriptions 的所有属性,如:

参数	说明	类型	默认值
column	一行显示的列数	Number	3
border	是否带有边框	Boolean	false
direction	排列方向	String	horizontal
size	尺寸	String	default

Items 配置

单组模式

interface Item {
  label: string | object // 标签文本或配置对象
  value: string | object // 字段名或配置对象
  hidden?: boolean | ((data) => boolean) // 是否隐藏
  span?: number // 占据的列数
  // ... 其他 Descriptions 属性
}

分组模式

interface GroupItem {
  title?: string // 分组标题
  extra?: string // 操作区文本
  items: Item[] // 该组的字段列表
  hidden?: boolean | ((data) => boolean) // 是否隐藏整个分组
  column?: number // 该组的列数
  border?: boolean // 该组是否带边框
  // ... 其他 DescriptionsItem 属性
}

Value 对象配置

interface ValueConfig {
  id: string // 字段名
  components: string | Component // 组件名或组件
  props: Object // 组件属性
}

Events

继承 Element Plus Descriptions 的所有事件。

Slots

插槽名	说明	参数
title	自定义标题
extra	自定义操作区
[id]	自定义字段内容	label｜value

特性说明

1. 简单展示: 直接使用字符串配置
2. 表单编辑: 使用组件配置实现可编辑的描述列表
3. 分组展示: 使用分组模式组织复杂数据
4. 条件显示: 使用 hidden 函数实现动态显示逻辑
5. 自定义渲染: 使用插槽实现复杂的自定义需求