el-step 步骤条中添加信息

最新推荐文章于 2024-06-19 12:16:18 发布

热爱学习的阳仔

最新推荐文章于 2024-06-19 12:16:18 发布

阅读量909

点赞数

分类专栏： vue.js 文章标签： elementui

本文链接：https://blog.csdn.net/weixin_53760584/article/details/128661857

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目中实现效果：
在这里插入图片描述
如果在步骤条中只是添加一段简单的文字，则可以使用：description；

但是如果description不满足我们业务中的需求时，这时可以考虑使用插槽 slot

代码部分：

   <el-steps :space="200" direction="vertical">
     <el-step title="告警详情" icon="el-icon-info" description="alertinfo">
       <template slot="description">
         <el-row>
           <el-col :span="8">处理人 : 王大锤</el-col>
           <el-col :span="8">详细信息 : 电量过低</el-col>
           <el-col :span="8">时间 : 2022-12-12</el-col>
         </el-row>
       </template>
     </el-step>
   </el-steps>