这是我开发的时候遇到的一个问题：项目需要在步骤条(竖直方向)的另一侧加时间显示，但是我在element ui 的step组件中一直没找着设置方法，所以就自己想了个办法加进来，效果如下：

代码如下，先上HTML部分：

然后是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值，即可让时间轴按我们想要的结果进行显示了

// 这是我想到的一个解决方法，可能也会有些不对或者不足的地方，如果大家有什么更好的方法或者插件，可以指出来互相学习一下

[转]vue Element UI走马灯组件重写

https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

封装一个优雅的element ui表格组件

现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

普通element ui table组件的使用

1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...

Element UI table组件源码分析

本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...

Element UI表格组件技巧：如何简洁实现跨页勾选、跨页统计功能

业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

Element UI 中组件this.$message报错

最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

Vue + Element UI 实现权限管理系统(动态加载菜单)

动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

element UI datepicker组件限制可选日期范围

长话短说,简单粗暴上代码了,在element中的datepicker,可以自由选择日期,如下: 然后我们根据element 官网的文档,给datepicker组件动态改变 picker-options ...

element ui table组件自定义合计栏,后台给的数据

合计的数据是后台传的,所以用table组件自定义一行用来合计

随机推荐

NoSQL初探之人人都爱Redis：(2)Redis API与常用数据类型简介

一.Redis API For .Net 首先,不得不说Redis官方提供了众多的API开发包,但是目前Redis官方版本不支持.Net直接进行连接,需要使用一些第三方的开源类库.目前最流行的就是Se ...

struts过滤器和拦截器的区别

拦截器的工作原理:当接收到一个httprequest ,a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标准的过滤器链 c) FilterDisp ...

cocos2dx 2.x 竖屏

1, xcode中General->Device Orientation只勾选Portrait. 2, 修改RootViewController.mm中下面代码: // For ios6.0 a ...

delphi android 中 Toast 的实现(老外写的UNIT)

unit Android.JNI.Toast; // Java bridge class imported by hand by Brian Long (http://blong.com)interf ...

浮出层的css写法，完美兼容IE6~10

利用元素间的绝对定位差一像素,使用不同颜色做出浮出层小三角的效果,完美兼容各浏览器! html部分: