首先，确保你已经在项目中引入了 Element Plus。如果没有，你可以通过以下方式安装：
npm install element-plus
然后，在你的 Vue 组件中使用 el-result：
<template>
<div>
<el-result
:status="resultStatus"
:title="resultTitle"
:subTitle="resultSubTitle"
>
<template #extra>
<el-button type="primary" @click="handleButtonClick">返回首页</el-button>
</template>
</el-result>
</div>
</template>
<script>
import { ElResult, ElButton } from 'element-plus';
export default {
components: {
ElResult,
ElButton,
},
data() {
return {
resultStatus: 'success', // 'success', 'warning', 'error', 'info'
resultTitle: '操作成功',
resultSubTitle: '恭喜您，操作已成功完成！',
};
},
methods: {
handleButtonClick() {
// 处理按钮点击事件，比如返回首页
console.log('返回首页');
},
},
};
</script>
在这个例子中，我们使用了 el-result 组件，并通过 :status 属性来设置结果的状态，可以是 'success'、'warning'、'error'、'info'。:title 属性表示结果的标题，:subTitle 属性表示结果的副标题。
通过 <template #extra> 插槽，我们可以在结果组件中添加额外的内容，比如返回按钮。在这里，我们使用了 el-button 组件来创建一个返回按钮，并通过 @click 事件监听按钮的点击。
你可以根据实际需求调整结果组件的样式和配置。
转载请注明出处：http://www.zyzy.cn/article/detail/5559/ElementPlus