ElementPlus Result 结果

2021-09-26 16:15 更新

Result 结果

用于对用户的操作结果或者异常状态做反馈。

基础用法


<template>
  <el-row>
  <el-col :sm="12" :lg="6">
    <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
      <template #extra>
        <el-button type="primary" size="medium">返回</el-button>
      </template>
    </el-result>
  </el-col>
  <el-col :sm="12" :lg="6">
    <el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作">
      <template #extra>
        <el-button type="primary" size="medium">返回</el-button>
      </template>
    </el-result>
  </el-col>
  <el-col :sm="12" :lg="6">
    <el-result icon="error" title="错误提示" subTitle="请根据提示进行操作">
      <template #extra>
        <el-button type="primary" size="medium">返回</el-button>
      </template>
    </el-result>
  </el-col>
  <el-col :sm="12" :lg="6">
    <el-result icon="info" title="信息提示" subTitle="请根据提示进行操作">
      <template #extra>
        <el-button type="primary" size="medium">返回</el-button>
      </template>
    </el-result>
  </el-col>
</el-row>
</template>

自定义内容


<template>
  <el-result title="404" subTitle="抱歉,请求错误">
  <template #icon>
    <el-image
      src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" rel="external nofollow" 
    ></el-image>
  </template>
  <template #extra>
    <el-button type="primary" size="medium">返回</el-button>
  </template>
</el-result>
</template>

Result Attributes

参数说明类型可选值默认值
title标题string
sub-title二级标题string
icon图标类型stringsuccess / warning / info / errorinfo

Result Slots

Name说明
icon自定义图标
title自定义标题
subTitle自定义二级标题
extra自定义底部额外区域


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号