Result 结果

Result 用于对用户的操作结果或异常状态做反馈。VISTA B 直接使用 Element Plus 的 el-result，适合提交成功、处理失败、权限受限、空状态和流程完成页。

基础用法

通过 title、sub-title 和 icon 设置结果页的主要信息。

提交成功

项目资料已经保存，可以继续完善下一步信息。

<el-result
  icon="success"
  title="提交成功"
  sub-title="项目资料已经保存，可以继续完善下一步信息。"
>
  <template #extra>
    <el-button type="primary">返回列表</el-button>
  </template>
</el-result>

不同状态

icon 支持 primary、success、warning、error、info 五种类型。

处理中

系统正在生成方案

成功

操作已完成

提示

请确认信息后继续

失败

操作未完成

信息

暂无更多内容

<template>
  <el-result icon="primary" title="处理中" sub-title="系统正在生成方案" />
  <el-result icon="success" title="成功" sub-title="操作已完成" />
  <el-result icon="warning" title="提示" sub-title="请确认信息后继续" />
  <el-result icon="error" title="失败" sub-title="操作未完成" />
  <el-result icon="info" title="信息" sub-title="暂无更多内容" />
</template>

自定义操作

使用 extra 插槽添加主操作和辅助操作，让用户可以继续下一步。

需要补充资料

当前项目缺少报价附件，请补充后重新提交审批。

<el-result
  icon="warning"
  title="需要补充资料"
  sub-title="当前项目缺少报价附件，请补充后重新提交审批。"
>
  <template #extra>
    <el-button type="primary">补充资料</el-button>
    <el-button>稍后处理</el-button>
  </template>
</el-result>

自定义图标

通过 icon 插槽可以完全替换默认状态图标。

审核通过

流程已流转到归档节点，相关成员会收到通知。

<template>
  <el-result title="审核通过" sub-title="流程已流转到归档节点。">
    <template #icon>
      <el-icon :size="72" color="var(--el-color-success)">
        <CircleCheckFilled />
      </el-icon>
    </template>
    <template #extra>
      <el-button type="primary">查看详情</el-button>
    </template>
  </el-result>
</template>

<script setup lang="ts">
import { CircleCheckFilled } from '@element-plus/icons-vue'
</script>

自定义标题和副标题

使用 title 和 sub-title 插槽可以放入标签、强调文本或更复杂的说明。

暂无审批记录空状态

你可以先创建审批流程，或调整筛选条件后重新查询。

<el-result icon="info">
  <template #title>
    <span>
      暂无审批记录
      <el-tag size="small" type="info">空状态</el-tag>
    </span>
  </template>
  <template #sub-title>
    <span>你可以先创建审批流程，或调整筛选条件后重新查询。</span>
  </template>
  <template #extra>
    <el-button type="primary">新建审批</el-button>
  </template>
</el-result>

异常反馈

失败或异常场景建议给出明确原因和可恢复操作。

提交失败

当前网络不稳定，审批单暂未提交成功。请稍后重试。

<el-result
  icon="error"
  title="提交失败"
  sub-title="当前网络不稳定，审批单暂未提交成功。请稍后重试。"
>
  <template #extra>
    <el-button type="primary">重新提交</el-button>
    <el-button>保存草稿</el-button>
  </template>
</el-result>

API

Result 属性

属性	说明	类型	默认值
title	标题文本	string	''
sub-title	副标题文本	string	''
icon	图标类型	primary / success / warning / error / info	info

Result 插槽

插槽	说明
icon	自定义图标
title	自定义标题
sub-title	自定义副标题
extra	自定义底部额外区域，常用于放置操作按钮