element 时间轴,
本文主要介绍elementstep组件是用时间轴显示在另一边的。文章通过示例代码对其进行了非常详细的介绍，对大家的学习或工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。
这是我在开发时遇到的一个问题：项目需要在step栏的另一侧(垂直方向)随时间显示，但我一直没能在element ui的step组件中找到一个设置方法，所以我想出了一个自己添加的方法。效果如下：
代码如下，首先在HTML部分：
div class= delate-step v-if= detail content . handle _ list . length！==0
Span处理链接：/span
div style= width:100%；高度：300px填充-底部：40px显示：表格；上边距：10px
div class=delate-step-lt
差异
延迟时间
:style= { top :` $ { index *(300-46)/(detail content . handle _ list . length-1))4 } px `}
detailContent.handle_list中的v-for=(item，index
:key=index
{{item.h_time}}/div
/div
div class=delate-step-rt
El-steps direction= vertical :active= delate _ result
el步骤
detailContent.handle_list中的v-for=(item，index
:key=index
:title=item.department
:description= item . h _ result=== null ？:item.h_result
/El-步骤
/El-步骤
/div
/div
/div
然后是css部分：延迟-步骤-lt {
宽度：80px
颜色：# 818181；
字体大小：13px
显示：表格单元；
位置：相对；延迟时间{
位置：绝对；
//:第一个孩子{
//top:4px；
//}
//:第n个子代(2) {
//top:80px；
//}
//:第n个子代(3) {
//top:170 px；
//}
//:最后一个孩子{
//bottom:24px；
//}
}
}。延迟-步骤-rt {
显示：表格单元；
}
现在来说说实现过程：
(1)首先在最外层包裹一个大div，然后为其设置display: table属性，使其下面的两个子div高度相同(需要为两个子div设置display: table-cell属性)。
(2)然后将时间轴放在左边的div中。你需要为这个div设置一个属性position:relative，将元素ui的step组件放在右边的div中，这样时间轴就呈现在垂直step的另一边。
(3)剩下的是关于步骤标题的显示位置和横向显示。首先，为每个显示的时间轴设置绝对定位属性position:absolute。一开始想到用css的伪类来设置。正如上面css部分注释的代码，效果还可以，但是后来我觉得我的step步骤数是动态的。如果步数发生变化(或多或少)，那么css设置的样式就没用了，那么这条路就走到尽头了(但如果步数固定，直接设置也没问题)；后来想起了vue的样式绑定属性：style，于是有了如下计算：
:style= { top :` $ { index *(300-46)/(detail content . handle _ list . length-1))4 } px `}
Index -遍历的每个时间轴数据的下标是300-整个step组件的高度(可以根据自己的需要调整)，46-因为我设置了padding-bottom为46，所以减去这个值，detail content . handle _ list-timeline数组，4-因为第一个显示在最上面，再加40。
计算过程：将step bar的显示高度(300-46)除以detail content . handle _ list . length-1(因为第一个默认在top:0px的位置，所以我们只需要计算剩下的detail content . handle _ list . length-1时间轴数据显示的位置)，这样就可以得到各个时间轴之间的距离，然后将各个时间轴的下标相乘，将相乘的结果设置为各个时间轴div的top值，这样时间轴就可以按照想要的结果显示了。
这是我想到的一个解决方案，可能会有一些错误或者不足。如果有什么比较好的方法或者插件，可以指出来互相学习。
这就是本文关于在元素步骤组件的另一侧添加时间线显示的内容。请搜索我们以前的文章或继续浏览下面的相关文章，了解更多元素时间线显示的相关内容。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。