ProDescriptions 超级描述列表

ProDescriptions 超级描述列表组件是在 ElDescriptions 的基础上进行拓展，因此完全兼容该组件的所有 Props 配置、Emit 事件、Slots 插槽。

描述列表内容有 3 种自定义方式渲染：

• render：完全自定义内容渲染，支持 h 函数、jsx/tsx
• renderHTML：返回 HTML 字符串渲染内容
• slots：根据配置项的 prop 生成对应的内容插槽，生成规则为 {prop}，和 render 函数功能一致

描述列表标签有 2 种自定义方式进行渲染：

• render：完全自定义标签渲染，支持 h 函数、jsx/tsx
• slots：根据配置项的 prop 生成对应的标签插槽，生成规则为 {prop}-header，和 render 函数功能一致

如果同时存在多个方式，只生效一个，优先级从高到低（描述列表内容和描述列表标签同理）。

基础用法

基础使用

名称Teek	性别1	状态1
标签success	执行进度30	代码块 const getData = async params => { const data = await getData(params) return { list: data.data, ...data } }
评分3.5	开关true	时间Tue Oct 21 2025 18:15:38 GMT+0000 (Coordinated Universal Time)

<script lang="ts" setup>
import type { DescriptionColumn } from "@/components/pro/descriptions";
import { ref } from "vue";
import { ProDescriptions } from "@/components/pro/descriptions";

const border = ref(false);

const data = {
  name: "Teek",
  gender: 1,
  status: 1,
  tag: "success",
  progress: 30,
  rate: 3.5,
  switch: true,
  time: new Date(),
  code: `
  const getData = async params => {
    const data = await getData(params)
    return { list: data.data, ...data }
  }`,
};

const columns: DescriptionColumn[] = [
  { label: "名称", prop: "name", el: "Copy" },
  {
    prop: "gender",
    label: "性别",
    el: "el-tag",
    options: [
      { label: "男", value: 1 },
      { label: "女", value: 2 },
    ],
  },
  {
    label: "状态",
    prop: "status",
    el: "point-tag",
    options: [
      { label: "未解决", value: 0, tagColor: "red" },
      { label: "已解决", value: 1, tagColor: "blue" },
      { label: "解决中", value: 2, tagColor: "yellow" },
      { label: "失败", value: 3, tagColor: "red" },
    ],
  },
  { label: "标签", width: 120, prop: "tag", el: "el-tag" },
  { label: "执行进度", width: 200, prop: "progress" },
  { label: "代码块", width: 250, prop: "code" },
  { label: "评分", width: 200, prop: "rate" },
  { label: "开关", width: 100, prop: "switch" },
  { label: "时间", width: 190, prop: "time" },
];
</script>

<template>
  <el-button type="primary" @click="border = !border" style="margin-bottom: 20px">
    {{ `${border ? "取消" : "打开"}边框` }}
  </el-button>
  <ProDescriptions title="基础使用" :column="3" :columns :data :border />
</template>

隐藏源代码

自定义内容 (render)

通过在单个 column 中配置 render 属性，返回 VNode 或 string 来自定义内容渲染。

这里演示通过 h 函数创建 VNode。

名称	Teek	状态	1	执行进度	30%
评分

<script lang="ts" setup>
import type { DescriptionColumn } from "@/components/pro/descriptions";
import { h } from "vue";
import { ElProgress, ElRate, ElTag } from "element-plus";
import { ProDescriptions } from "@/components/pro/descriptions";

const data = {
  name: "Teek",
  status: 1,
  progress: 30,
  rate: 3.5,
};

const columns: DescriptionColumn[] = [
  { label: "名称", prop: "name", el: "Copy" },
  {
    label: "状态",
    prop: "status",
    options: [
      { label: "未解决", value: 0 },
      { label: "已解决", value: 1 },
      { label: "解决中", value: 2 },
      { label: "失败", value: 3 },
    ],
    render: ({ value }) => h(ElTag, null, () => value),
  },
  {
    label: "执行进度",
    width: 200,
    prop: "progress",
    render: ({ value }) => h(ElProgress, { percentage: value as number }),
  },
  {
    label: "评分",
    width: 200,
    prop: "rate",
    render: ({ value }) => h(ElRate, { modelValue: value as number, disabled: true }),
  },
];
</script>

<template>
  <ProDescriptions :column="3" :columns :data border />
</template>

隐藏源代码

自定义内容 (jsx/tsx)

除了 h 函数，你还可以使用 jsx 或 tsx 自定义内容渲染。

警告

使用 jsx 或 tsx 时，请在 script 上将 lang=ts 改为 lang=tsx。

<script setup lang="tsx">

名称	Teek	状态	1	执行进度	30%
评分

<script lang="tsx" setup>
import type { DescriptionColumn } from "@/components/pro/descriptions";
import { ElProgress, ElRate, ElTag } from "element-plus";
import { ProDescriptions } from "@/components/pro/descriptions";

const data = {
  name: "Teek",
  status: 1,
  progress: 30,
  rate: 3.5,
};

const columns: DescriptionColumn[] = [
  { label: "名称", prop: "name", el: "Copy" },
  {
    label: "状态",
    prop: "status",
    options: [
      { label: "未解决", value: "0" },
      { label: "已解决", value: "1" },
      { label: "解决中", value: "2" },
      { label: "失败", value: "3" },
    ],
    render: ({ value }) => <ElTag>{value}</ElTag>,
  },
  {
    label: "执行进度",
    width: 200,
    prop: "progress",
    render: ({ value }) => <ElProgress percentage={value as number} />,
  },
  {
    label: "评分",
    width: 200,
    prop: "rate",
    render: ({ value }) => <ElRate v-model={value} disabled={true} />,
  },
];
</script>

<template>
  <ProDescriptions :column="3" :columns :data border />
</template>

隐藏源代码

自定义内容 (renderHTML)

如果你只想对内容进行替换，可以使用 renderHtml 属性返回一个可信的 HTML 字符串。

名称	Teek	状态	1	执行进度	30
评分	3.5

<script lang="ts" setup>
import type { DescriptionColumn } from "@/components/pro/descriptions";
import { ProDescriptions } from "@/components/pro/descriptions";

const data = {
  name: "Teek",
  status: 1,
  progress: 30,
  rate: 3.5,
};

const columns: DescriptionColumn[] = [
  { label: "名称", prop: "name", el: "Copy" },
  {
    label: "状态",
    prop: "status",
    options: [
      { label: "未解决", value: 0 },
      { label: "已解决", value: 1 },
      { label: "解决中", value: 2 },
      { label: "失败", value: 3 },
    ],
    renderHTML: ({ value }) => `<span class="el-tag el-tag--success">${value}</span>`,
  },
  {
    label: "执行进度",
    width: 200,
    prop: "progress",
    renderHTML: ({ value }) => `<span style="color: red">${value}</span>`,
  },
  {
    label: "评分",
    width: 200,
    prop: "rate",
    renderHTML: ({ value }) => `<span style="color: green">${value}</span>`,
  },
];
</script>

<template>
  <ProDescriptions :column="3" :columns :data border />
</template>

隐藏源代码

自定义内容 (插槽)

自动根据配置项的 prop 属性生成插槽，因此你也可以使用插槽自定义单元格渲染。

生成插槽的规则为当前 prop 的值，假设一个 column 的 prop 为 username，那么插槽为 username。

名称	Teek	状态	1	执行进度	30%
评分

<script lang="ts" setup>
import type { DescriptionColumn } from "@/components/pro/descriptions";
import { ElProgress, ElRate, ElTag } from "element-plus";
import { ProDescriptions } from "@/components/pro/descriptions";

const data = {
  name: "Teek",
  status: 1,
  progress: 30,
  rate: 3.5,
};

const columns: DescriptionColumn[] = [
  { label: "名称", prop: "name", el: "Copy" },
  {
    label: "状态",
    prop: "status",
    options: [
      { label: "未解决", value: "0" },
      { label: "已解决", value: "1" },
      { label: "解决中", value: "2" },
      { label: "失败", value: "3" },
    ],
  },
  { label: "执行进度", width: 200, prop: "progress" },
  { label: "评分", width: 200, prop: "rate" },
];
</script>

<template>
  <ProDescriptions :column="3" :columns :data border>
    <template #status="{ value }">
      <el-tag type="primary">{{ value }}</el-tag>
    </template>

    <template #progress="{ value }">
      <el-progress :percentage="value as number" />
    </template>

    <template #rate="{ value }">
      <el-rate :modelValue="value as number" disabled />
    </template>
  </ProDescriptions>
</template>

隐藏源代码

自定义标签 (render)

通过在单个 column 中配置 renderLabel 属性，返回 VNode 或 string 来自定义标签渲染。

名称

Teek

状态

1

<script lang="ts" setup>
import type { DescriptionColumn } from "@/components/pro/descriptions";
import { h } from "vue";
import { ElTag } from "element-plus";
import { ProDescriptions } from "@/components/pro/descriptions";

const data = {
  name: "Teek",
  status: 1,
};

const columns: DescriptionColumn[] = [
  {
    label: "名称",
    prop: "name",
    el: "Copy",
    renderLabel: ({ label }) => h(ElTag, null, () => label),
  },
  {
    label: "状态",
    prop: "status",
    options: [
      { label: "未解决", value: 0 },
      { label: "已解决", value: 1 },
      { label: "解决中", value: 2 },
      { label: "失败", value: 3 },
    ],
    renderLabel: ({ label }) => h(ElTag, null, () => label),
  },
];
</script>

<template>
  <ProDescriptions :column="3" :columns :data border />
</template>

隐藏源代码

自定义标签 (jsx/tsx)

除了 h 函数，你还可以使用 jsx 或 tsx 自定义标签渲染。

警告

使用 jsx 或 tsx 时，请在 script 上将 lang=ts 改为 lang=tsx。

<script setup lang="tsx">

名称

Teek

状态

1

<script lang="tsx" setup>
import type { DescriptionColumn } from "@/components/pro/descriptions";
import { ElTag } from "element-plus";
import { ProDescriptions } from "@/components/pro/descriptions";

const data = {
  name: "Teek",
  status: 1,
};

const columns: DescriptionColumn[] = [
  {
    label: "名称",
    prop: "name",
    el: "Copy",
    renderLabel: ({ label }) => <ElTag>{label}</ElTag>,
  },
  {
    label: "状态",
    prop: "status",
    options: [
      { label: "未解决", value: 0 },
      { label: "已解决", value: 1 },
      { label: "解决中", value: 2 },
      { label: "失败", value: 3 },
    ],
    renderLabel: ({ label }) => <ElTag>{label}</ElTag>,
  },
];
</script>

<template>
  <ProDescriptions :column="3" :columns :data border />
</template>

隐藏源代码

自定义标签 (插槽)

自动根据配置项的 prop 生成对应的插槽，生成规则为 {prop}-label。

名称

Teek

状态

1

<script lang="ts" setup>
import type { DescriptionColumn } from "@/components/pro/descriptions";
import { ElTag } from "element-plus";
import { ProDescriptions } from "@/components/pro/descriptions";

const data = {
  name: "Teek",
  status: 1,
};

const columns: DescriptionColumn[] = [
  {
    label: "名称",
    prop: "name",
    el: "Copy",
  },
  {
    label: "状态",
    prop: "status",
    options: [
      { label: "未解决", value: "0" },
      { label: "已解决", value: "1" },
      { label: "解决中", value: "2" },
      { label: "失败", value: "3" },
    ],
  },
];
</script>

<template>
  <ProDescriptions :column="3" :columns :data border>
    <template #name-label="{ label }">
      <ElTag>{{ label }}</ElTag>
    </template>

    <template #status-label="{ label }">
      <ElTag>{{ label }}</ElTag>
    </template>
  </ProDescriptions>
</template>

隐藏源代码

可编辑

提示

• 超级列表数据建议是响应式，这样表格才会监听到数据的变化并进行更新
• 如果传入 data 数据时，表单数据不会和表格数据同步更新，请使用 formChange 事件手动同步
• 如果传入 api 来让超级表格内部代理数据时，则表单数据会自动更新表格数据

label 位置

leftcenterright

direction 方向

verticalhorizontal

边框开启边框

名称	--	状态	--	标签	--
执行进度	--	代码块	--	评分	--
开关	--	时间	--

传入请求函数 & 编辑时内部自动更新描述列表数据

名称	--	状态	--	标签	--
执行进度	--	代码块	--	评分	--
开关	--	时间	--

<script lang="ts" setup>
import type { DescriptionColumn } from "@/components/pro/descriptions";
import type { ElFormProps } from "@/components/pro/form";
import { ref } from "vue";
import { ProDescriptions } from "@/components/pro/descriptions";
import { setProp } from "@/components/pro/helper";

const descriptionsData = ref({});
const model = ref({});

const position = ref<"center" | "left" | "right">("right");
const border = ref(true);
const editable = ref(false);
const direction = ref("horizontal");

const DataServe = {
  getList: async () => {
    const data = {
      name: "",
      status: 1,
      tag: "success",
      progress: 30,
      rate: 3.5,
      switch: true,
      time: new Date(),
      code: `
  const getData = async params => {
    const data = await getData(params)
    return { list: data.data, ...data }
  }`,
    };

    return { data };
  },
};

const elFormProps: Partial<ElFormProps> = {
  rules: {
    name: [{ required: true, message: "请输入名称" }],
    tag: [{ required: true, message: "请输入标签" }],
  },
};

const columns: DescriptionColumn[] = [
  { label: "名称", prop: "name" },
  {
    label: "状态",
    prop: "status",
    options: [
      { label: "未解决", value: 0 },
      { label: "已解决", value: 1 },
      { label: "解决中", value: 2 },
      { label: "失败", value: 3 },
    ],
    formColumn: { el: "el-select" },
  },
  { label: "标签", width: 120, prop: "tag" },
  { label: "执行进度", width: 200, prop: "progress", formColumn: { formItemProps: { required: true } } },
  {
    label: "代码块",
    span: editable => (editable ? 2 : 1),
    labelWidth: 50,
    prop: "code",
  },
  { label: "评分", width: 200, prop: "rate" },
  { label: "开关", width: 100, prop: "switch", formColumn: { el: "el-switch" } },
  { label: "时间", width: 190, prop: "time" },
];

const getList = async () => {
  const { data } = await DataServe.getList();
  descriptionsData.value = data || {};
};

getList();

const handleFormChange = (value: unknown, prop: string) => {
  setProp(descriptionsData.value, prop, value);
};
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <ProDescriptions
      v-model="model"
      :data="descriptionsData"
      title="传入数据 & 编辑时需要手动通过 change 事件更新描述列表数据"
      :column="3"
      :columns
      :border
      :editable
      :direction
      :descriptions-item-props="{ align: position, minWidth: '60px' }"
      :form-props="{ elFormProps }"
      edit-button
      @form-change="handleFormChange"
    >
      <template #title>
        <div class="title">
          <div>
            <span class="label">label 位置</span>
            <el-radio-group v-model="position">
              <el-radio value="left">left</el-radio>
              <el-radio value="center">center</el-radio>
              <el-radio value="right">right</el-radio>
            </el-radio-group>
          </div>

          <div>
            <span class="label">direction 方向</span>
            <el-radio-group v-model="direction">
              <el-radio value="vertical">vertical</el-radio>
              <el-radio value="horizontal">horizontal</el-radio>
            </el-radio-group>
          </div>

          <div>
            <span class="label">边框</span>
            <el-checkbox v-model="border">开启边框</el-checkbox>
          </div>
        </div>
      </template>
    </ProDescriptions>

    <ProDescriptions
      v-model="model"
      :request-api="DataServe.getList"
      title="传入请求函数 & 编辑时内部自动更新描述列表数据"
      :column="3"
      :columns
      :border
      :editable
      :direction
      :descriptions-item-props="{ align: position, minWidth: '60px' }"
      :form-props="{ elFormProps }"
      edit-button
    />
  </div>
</template>

<style lang="scss" scoped>
.title {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  column-gap: 100px;

  .label {
    padding-right: 10px;
  }
}
</style>

隐藏源代码

组合式函数

通过 组合式函数 函数，监听任意一个超级描述列表，然后就通过函数来控制该描述列表。

名称Teek	状态1	标签success
执行进度30	代码块 const getData = async params => { const data = await getData(params) return { list: data.data, ...data } }	评分3.5
开关true	时间Tue Oct 21 2025 18:15:38 GMT+0000 (Coordinated Universal Time)

<script lang="ts" setup>
import type { DescriptionColumn } from "@/components/pro/descriptions";
import { ref } from "vue";
import { ProDescriptions, useProDescriptions } from "@/components/pro/descriptions";

const { descriptionsRegister, descriptionsMethods } = useProDescriptions();
const { setColumn, setProps, addColumn, delColumn, setValues } = descriptionsMethods;

const model = ref({});

const data = {
  name: "Teek",
  status: 1,
  tag: "success",
  progress: 30,
  rate: 3.5,
  switch: true,
  time: new Date(),
  code: `
  const getData = async params => {
    const data = await getData(params)
    return { list: data.data, ...data }
  }`,
};

const columns: DescriptionColumn[] = [
  { label: "名称", prop: "name" },
  {
    label: "状态",
    prop: "status",
    options: [
      { label: "未解决", value: "0" },
      { label: "已解决", value: "1" },
      { label: "解决中", value: "2" },
      { label: "失败", value: "3" },
    ],
    formColumn: { el: "el-select" },
  },
  { label: "标签", width: 120, prop: "tag" },
  { label: "执行进度", width: 200, prop: "progress", formColumn: { formItemProps: { required: true } } },
  {
    label: "代码块",
    span: editable => (editable ? 2 : 1),
    labelWidth: 50,
    prop: "code",
  },
  { label: "评分", width: 200, prop: "rate" },
  { label: "开关", width: 100, prop: "switch", formColumn: { el: "el-switch" } },
  { label: "时间", width: 190, prop: "time" },
];

const changeBorder = (border: boolean) => {
  setProps({ border });
};

const changeLabel = (label: string) => {
  setColumn([{ prop: "name", field: "label", value: label }]);
};

const changeColumn = (column: number) => {
  setProps({ column });
};

const addOneColumn = () => {
  addColumn({ prop: "addCol", label: "新增列" }, "time", "after");
  setValues({ addCol: "我是新增的一列" });
};

const delOneColumn = () => {
  delColumn("add-col");
};

const changeEdit = (editable: boolean) => {
  setProps({ editable });
};
</script>

<template>
  <el-space fill>
    <el-card shadow="never">
      <el-space wrap>
        <el-button @click="changeBorder(true)">打开边框</el-button>
        <el-button @click="changeBorder(false)">关闭边框</el-button>
        <el-button @click="changeLabel('Teek 姓名')">修改名称</el-button>
        <el-button @click="changeColumn(2)">默认显示两列</el-button>
        <el-button @click="changeColumn(3)">默认显示三列</el-button>
        <el-button @click="addOneColumn">新增一列</el-button>
        <el-button @click="delOneColumn">删除一列</el-button>
        <el-button @click="changeEdit(true)">打开编辑功能</el-button>
        <el-button @click="changeEdit(false)">关闭编辑功能</el-button>
      </el-space>
    </el-card>

    <ProDescriptions v-model="model" :columns :data @register="descriptionsRegister" />
  </el-space>
</template>

隐藏源代码

函数式组件渲染

通过 createDescriptionsComponent 函数式创建 ProDescriptions 组件。

名称Teek	状态1	标签success
执行进度30	代码块 const getData = async params => { const data = await getData(params) return { list: data.data, ...data } }	评分3.5
开关true	时间Tue Oct 21 2025 18:15:38 GMT+0000 (Coordinated Universal Time)

<script setup lang="ts">
import type { DescriptionColumn } from "@/components/pro/descriptions";
import { useProDescriptions } from "@/components/pro/descriptions";

const {
  createMethods: { createDescriptionsComponent },
} = useProDescriptions();

/**
 * context 里有 slots 和 attrs，如果元素里有 slots 和 attrs，则必传
 */
const RenderProDescriptions = (_: any, context: Record<string, any>) => {
  // 函数式创建 Template 组件
  return createDescriptionsComponent(
    {
      columns,
      data,
    },
    context
  );
};

const data = {
  name: "Teek",
  status: 1,
  tag: "success",
  progress: 30,
  rate: 3.5,
  switch: true,
  time: new Date(),
  code: `
  const getData = async params => {
    const data = await getData(params)
    return { list: data.data, ...data }
  }`,
};

const columns: DescriptionColumn[] = [
  { label: "名称", prop: "name", el: "Copy" },
  {
    label: "状态",
    prop: "status",
    options: [
      { label: "未解决", value: 0 },
      { label: "已解决", value: 1 },
      { label: "解决中", value: 2 },
      { label: "失败", value: 3 },
    ],
  },
  { label: "标签", width: 120, prop: "tag", el: "el-tag" },
  { label: "执行进度", width: 200, prop: "progress" },
  { label: "代码块", width: 250, prop: "code" },
  { label: "评分", width: 200, prop: "rate" },
  { label: "开关", width: 100, prop: "switch" },
  { label: "时间", width: 190, prop: "time" },
];
</script>

<template>
  <RenderProDescriptions />
</template>

隐藏源代码

函数式渲染

通过 createDescriptions 函数式动态渲染 ProDescriptions 组件到指定元素。

该函数会返回 useProDescriptions 函数的返回值，如果你不清楚什么是 useProDescriptions，请查看 组合式函数。

<script setup lang="ts">
import type { DescriptionColumn } from "@/components/pro/descriptions";
import { useProDescriptions } from "@/components/pro/descriptions";

const {
  createMethods: { createDescriptions },
} = useProDescriptions();

const data = {
  name: "Teek",
  status: 1,
  tag: "success",
  progress: 30,
  rate: 3.5,
  switch: true,
  time: new Date(),
  code: `
  const getData = async params => {
    const data = await getData(params)
    return { list: data.data, ...data }
  }`,
};

const columns: DescriptionColumn[] = [
  { label: "名称", prop: "name", el: "Copy" },
  {
    label: "状态",
    prop: "status",
    options: [
      { label: "未解决", value: 0 },
      { label: "已解决", value: 1 },
      { label: "解决中", value: 2 },
      { label: "失败", value: 3 },
    ],
  },
  { label: "标签", width: 120, prop: "tag", el: "el-tag" },
  { label: "执行进度", width: 200, prop: "progress" },
  { label: "代码块", width: 250, prop: "code" },
  { label: "评分", width: 200, prop: "rate" },
  { label: "开关", width: 100, prop: "switch" },
  { label: "时间", width: 190, prop: "time" },
];

createDescriptions("proDescriptionInstance", {
  columns,
  data,
  border: true,
});
</script>

<template>
  <div ref="proDescriptionInstance"></div>
</template>

隐藏源代码

DescriptionColumn 配置项

属性名	说明	类型	默认值
prop	唯一键	string	—
label	标签	string / function	—
span	列的数量	number / function	—
rowSpan	单元格应该跨越的行数	number / function	—
width	列的宽度	string / number / function	—
minWidth	列的最小宽度	string / number / function	—
labelWidth	列标签宽	string / number / function	—
hidden	是否隐藏	boolean / function	false
options	字典枚举数据	array	—
optionsProp	指定 Options 的 key，如果设置了则优先从缓存获取对于 key 的 Options 数据	string	—
optionField	字典指定 label && value && children 的 key 值	object
transformOption	自定义当前 option 选项	function	—
order	排序（从大到小）	number	—
renderLabel	自定义 label 渲染	function	—
render	自定义内容渲染	function	—
renderHTML	自定义内容渲染（HTML 格式）	function	—
formatValue	自定义内容	function	—
editable	是否为编辑态	boolean	false
formProps	ProForm Props	object ProForm	—
formColumn	ProFormItem Props，等于 ProForm 的单个 column	object FormItemColumnProps	—
el	指定组件进行修饰（如 ElTag、ElLink 等）	string	—
elProps	指定 el 组件的 props	object / function	—
elSlots	el 组件的插槽	object	—
...	其他扩展属性，支持所有 ElDescriptionsItem Attributes	...	...

render、插槽参数类型 DescriptionsRenderParams：

export interface DescriptionsRenderParams {
  /**
   * 当前值
   */
  value: any;
  /**
   * 当前列配置
   */
  column: DescriptionColumn;
  /**
   * 当前描述列表标签
   */
  label: string;
  /**
   * 当前渲染数据
   */
  data: Record<string, any>;
}

Attributes

属性名	说明	类型	默认值
data	描述列表数据，如果传入该配置项且有数据，则不会执行 api 请求	object	—
requestApi	请求数据的 api	function	—
defaultRequestParams	默认请求参数	object	—
transformData	对请求成功的数据进行处理	function	—
columns	描述列表列配置	array	[]
descriptionsItemProps	描述列表 DescriptionItem 全局配置	object	—
card	是否使用卡片背景	boolean	false
editable	描述列表整体是否为编辑态	boolean	false
editButton	是否显示编辑按钮	boolean	true
editText	编辑按钮文案	array	["编辑", "退出编辑"]
formProps	ProForm Props	object	—
showReset	是否显示重置按钮	boolean	true
submitText	提交按钮文字	string	提交
resetText	重置按钮文字	string	重置
submitLoading	提交按钮 loading	boolean	false
footerAlign	底部按钮对齐方式	string	right
footerStyle	底部按钮组样式	object	—
validate	是否使用内置的表单校验功能	boolean	true

Events

名称	说明	类型
formChange	表单值改变事件	function
edited	进入编辑态事件	function
editedCancel	退出编辑态事件	function
submit	提交按钮事件	function
reset	重置按钮事件	function

Slots

插槽名	说明	作用域插槽参数
edit-button	自定义编辑按钮	object
edit-button-after	编辑按钮后侧插槽	—
footer	自定义底部按钮组	object
'prop'	自定义内容插槽，根据配置项的 prop 生成	object
'prop'-label	自定义标签插槽，根据配置项的 prop 生成	object
...	当 el 指定组件类型后，支持传入该组件的插槽，如 el-tag 组件的 default 插槽	...
...	其他扩展属性，支持所有 ElDescriptions Slots	...

Exposes

名称	说明	类型
proFormInstances	ProForm 实例集合，每一个描述列表 Item 存储一个表单，key 是 prop	object
openEdited	打开编辑态	function
closeEdited	关闭编辑态	function
getElFormInstance	获取所有 ElForm 实例	function