vue elementui steps组件在步骤条中添加自定义样式内容
由于对于vue了解不够深入,导致今天写这个组件浪费了很多时间。后来一个大神同事给我指点了一下。
想做成如图所示的样式的步骤条,使用vue elementui的steps组件做。
最简单的在组件中插入代码实现样式的方法时行不通的
<div style="height: 300px;"> <el-steps direction="vertical" :active="1"> <el-step title="步骤 1"> <div>001002003 </div> </el-step> <el-step title="步骤 2"></el-step> <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step> </el-steps> </div>
所以想了一种办法,使用左右两个div实现。不过步骤条的长度,和步骤条中显示的具体内容的位置也非常不好判断。
<div class="approvalProcess" style="backgroung-color:background-color:#DFEBFF;" > <div class='approvalProcess_left'> <el-steps :active="active" finish-status="success" direction="vertical"> <el-step :title="item.label" v-for="item in approvalProcessProject" :id="item.id"> </el-step> </el-steps> <el-button style="margin-top: 12px;" @click="next">下一步</el-button> </div> <div class='approvalProcess_right'> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="processing_content"> <tr> <td > <div class="processing_content_detail" style="float:left;width:70%"><span class="title_tjname">申请人 圆领 提交了割接方案</span></div> <div class="processing_content_detail" style="float:right;"><span class="title_tjname">昨天12::24</span> </div> </td> </tr> <tr> <td> <div class="processing_content_detail" style="float:left;width:70%"> <div style="float:left;width: 2px;height: 20px; background:#C7D4E9;margin-left:10px;margin-right:10px"></div> <span class="title_tjname" style="color:#919FB8">同意,建议通过 www.dianjilingqu.com</span></div> </td> </tr> </table> </div>
后来尝试了使用vue的插槽,建一个template的插槽。名字用description 就能进去了。我需要恶补下插槽的相关知识。
<div class="stepComponent" > <div class="stepsTitle"> <div style="float:left;width:2px;height:20px; background:#219AFF;"></div> 审批流程及意见 www.dianjilingqu.com </div> <div class="approvalProcess" > <el-steps :active="active" finish-status="success" direction="vertical" > <el-step :title="item.label" v-for="item in approvalProcessProject" :id="item.id"> <template slot="description" > <div class="step-row" v-for="item in approvalProcessProject"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="processing_content"> <tr> <td style="color:#98A6BE"> <div class="processing_content_detail" style="float:left;width:70%"><span >申请人 <span style="color:#219AFF">圆领{{}}</span> 提交了割接方案</span></div> <div class="processing_content_detail" style="float:right;"><span ><i class="el-icon-time"></i> 昨天12:24</span> </div> </td> </tr> <tr> <td> <div class="processing_content_detail" style="float:left;width:70%"> <div style="float:left;width: 2px;height: 20px; background:#C7D4E9;margin-left:10px;margin-right:10px"></div> <span style="color:#919FB8">同意,建议通过</span></div> </td> </tr> </table> </div> </template> </el-step> </el-steps> <el-button style="margin-top: 12px;" @click="next">下一步</el-button> </div> </div> </template> <script> export default { components: { }, props: ['data', 'defaultActive'], data() { return { active: 0, approvalProcessProject:[ {id:'0',label: "方案制定"}, { id:'1',label: "割接方案会审"}, { id:'2',label: "割接审批"}, { id:'3',label: "审批成功"}, ], }; }, watch: { }, mounted() { }, computed: { }, methods: { next() { if (this.active++ > 2) this.active = 0; }, } }; </script> <style scoped> .stepComponent{ background-color:#DFEBFF; width: 100%-20px; padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px; } .stepsTitle{ margin: 10px 0px 10px 10px ; } .approvalProcess{ color: #9EADC4; font-size: 14px; /* width: 100%; */ background:#DFEBFF; margin-left:20px; margin-right:0px; margin-top:10px; } .processing_content{ background-color: #D9E5F9; } .processing_content_detail{ margin-left: 10px; margin-top: 3.5px; margin-bottom: 3.5px; width:150px; display:inline-block; } .step-row{ min-width:500px; margin-bottom:12px; margin-top:12px; } </style>
下面是我写好的样式
基本可以实现所需样式。
有同学问:如何把图标换成图片?
是想要这样效果吗?代码载下面
<el-steps :active="1"> <el-step title="步骤 1 www.dianjilingqu.com"> <template slot="icon" > <img src="http://img4.imgtn.bdimg.com/it/u=2480604110,4008147240&fm=26&gp=0.jpg" style="height:25x;width:25px;"> </template> </el-step> <el-step title="步骤 2" icon="el-icon-upload"> <template slot="icon" > <img src="http://img.zcool.cn/community/01bc1c5694b3e932f87574bef9bc29.png" style="height:25x;width:25px;"> </template> </el-step> </el-step> <el-step title="步骤 3" icon="el-icon-picture"></el-step> </el-steps> </div>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库