Result 结果
用于对用户操作结果或者异常状态的反馈。
基础用法
primary
已在 2.9.11 版本中添加。
主要提示
请按照说明操作
成功提示
请按照说明操作
警告提示
请按照说明操作
错误提示
请按照说明操作
信息提示
使用插槽作为副标题
vue
<template>
<el-row>
<el-col :sm="12" :lg="6" :xl="4">
<el-result
icon="primary"
title="Primary Tip"
sub-title="Please follow the instructions"
>
<template #extra>
<el-button type="primary">Back</el-button>
</template>
</el-result>
</el-col>
<el-col :sm="12" :lg="6" :xl="4">
<el-result
icon="success"
title="Success Tip"
sub-title="Please follow the instructions"
>
<template #extra>
<el-button type="primary">Back</el-button>
</template>
</el-result>
</el-col>
<el-col :sm="12" :lg="6" :xl="4">
<el-result
icon="warning"
title="Warning Tip"
sub-title="Please follow the instructions"
>
<template #extra>
<el-button type="primary">Back</el-button>
</template>
</el-result>
</el-col>
<el-col :sm="12" :lg="6" :xl="4">
<el-result
icon="error"
title="Error Tip"
sub-title="Please follow the instructions"
>
<template #extra>
<el-button type="primary">Back</el-button>
</template>
</el-result>
</el-col>
<el-col :sm="12" :lg="6" :xl="4">
<el-result icon="info" title="Info Tip">
<template #sub-title>
<p>Using slot as subtitle</p>
</template>
<template #extra>
<el-button type="primary">Back</el-button>
</template>
</el-result>
</el-col>
</el-row>
</template>
<script setup lang="ts"></script>
隐藏源代码
自定义内容
404
抱歉,请求错误
vue
<template>
<el-result title="404" sub-title="Sorry, request error">
<template #icon>
<el-image
src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
/>
</template>
<template #extra>
<el-button type="primary">Back</el-button>
</template>
</el-result>
</template>
隐藏源代码
API
属性
名称 | 描述 | 类型 | 默认值 |
---|---|---|---|
title | 结果的标题 | string | '' |
副标题 | 结果的副标题 | string | '' |
icon | 结果的图标类型 | 枚举 | 信息 |
插槽
名称 | 描述 |
---|---|
icon | 作为结果图标的内容 |
title | 作为结果标题的内容 |
副标题 | 作为结果副标题的内容 |
额外信息 | 作为结果额外区域的内容 |