Result 结果

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

基础用法

Result 结果 - 图1

  1. <el-row>
  2. <el-col :sm="12" :lg="6">
  3. <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
  4. <template slot="extra">
  5. <el-button type="primary" size="medium">返回</el-button>
  6. </template>
  7. </el-result>
  8. </el-col>
  9. <el-col :sm="12" :lg="6">
  10. <el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作">
  11. <template slot="extra">
  12. <el-button type="primary" size="medium">返回</el-button>
  13. </template>
  14. </el-result>
  15. </el-col>
  16. <el-col :sm="12" :lg="6">
  17. <el-result icon="error" title="错误提示" subTitle="请根据提示进行操作">
  18. <template slot="extra">
  19. <el-button type="primary" size="medium">返回</el-button>
  20. </template>
  21. </el-result>
  22. </el-col>
  23. <el-col :sm="12" :lg="6">
  24. <el-result icon="info" title="信息提示" subTitle="请根据提示进行操作">
  25. <template slot="extra">
  26. <el-button type="primary" size="medium">返回</el-button>
  27. </template>
  28. </el-result>
  29. </el-col>
  30. </el-row>

自定义内容

Result 结果 - 图2

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

Result Attributes

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

Result Slots

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