这是我开发的时候遇到的一个问题：项目需要在步骤条（竖直方向）的另一侧加时间显示，但是我在element ui 的step组件中一直没找着设置方法，所以就自己想了个办法加进来，效果如下：
代码如下，先上HTML部分：
<div class="delate-step" v-if="detailContent.handle_list.length !==0">
<span>处理环节：</span>
<div style="width: 100%; height: 300px; padding-bottom: 40px; display: table;margin-top: 10px;">
<div class="delate-step-lt">
<div
class="delate-time"
:style="{'top': `${index*((300-46)/(detailContent.handle_list.length-1)) 4}px`}"
v-for="(item, index) in detailContent.handle_list"
:key="index"
>{{item.h_time}}</div>
</div>
<div class="delate-step-rt">
<el-steps direction="vertical" :active="delate_result">
<el-step
v-for="(item, index) in detailContent.handle_list"
:key="index"
:title="item.department"
:description="item.h_result==='null'?'':item.h_result"
></el-step>
</el-steps>
</div>
</div>
</div>然后是css部分：
.delate-step-lt {
width: 80px;
color: #818181;
font-size: 13px;
display: table-cell;
position: relative;
.delate-time {
position: absolute;
// &:first-child {
// top: 4px;
// }
// &:nth-child(2) {
// top: 80px;
// }
// &:nth-child(3) {
// top: 170px;
// }
// &:last-child {
// bottom: 24px;
// }
}
}
.delate-step-rt {
display: table-cell;
}现在说说实现过程吧：
（1）首先先用一个大的div包裹在最外层，然后给它设置display：table属性，目的是让其下面的两个子div等高（两个子div需要设置display：table-cell属性）
（2）然后将时间轴放左边的div中，需要给这个div设置一个属性position：relative，element ui的step组件放在右边的div中，这样就实现时间轴呈现在竖向step的另一侧了。
（3）剩下的则是显示位置跟step 的 title 水平显示的问题了，先给每个显示的时间轴设置绝对定位属性position：absolute，一开始我想到的是使用css的伪类进行设置，如上css部分注释的代码，效果还行，但是后面想到我的step步骤数量是动态的，如果步骤数量发生了变化（变多或者变少），那么css设置的样式就没用了，所以这条路就走到尽头（不过若是固定步骤数量，直接这样设置是没问题的）；后面想起来vue的样式绑定属性：style，于是就有了下面的计算：
:style="{'top': `${index*((300-46)/(detailContent.handle_list.length-1)) 4}px`}"- index --- 遍历出来的每个时间轴数据的下标
- 300 --- 整个step组件的高度（可以根据自己需要进行调整），
- 46 --- 是因为我设置了padding-bottom为46，所以减去这个值，
- detailContent.handle_list --- 时间轴数组，
4 --- 因为第一个是靠顶部显示的，多加4px是想让时间轴显示的位置下沉一点
计算过程：用步骤条的显示高度(300-46)除以detailContent.handle_list.length-1(因为第一个默认在top：0px的位置了，所以我们只需要计算剩下的detailContent.handle_list.length-1个时间轴数据显示的位置即可)，这样就可以得到每个时间轴之间的间距，然后乘以每个时间轴下标，将乘的结果设置成每个时间轴div的top值，即可让时间轴按我们想要的结果进行显示了
这是我想到的一个解决方法，可能也会有些不对或者不足的地方，如果大家有什么更好的方法或者插件，可以指出来互相学习一下
到此这篇关于element step组件在另一侧加时间轴显示的文章就介绍到这了,更多相关element 时间轴显示内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！