标签：vue 自定义 elementui label width nbsp 10px margin
由于对于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>
标签：vue,自定义,elementui,label,width,nbsp,10px,margin 来源： https://www.cnblogs.com/yuanyuzhou/p/15817282.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。