elementui实现横向时间轴_elementuistep组件在另⼀侧加时间
轴显⽰
这是我开发的时候遇到的⼀个问题：项⽬需要在步骤条(竖直⽅向)的另⼀侧加时间显⽰，但是我在element ui 的step组件中⼀直没着设置⽅法，所以就⾃⼰想了个办法加进来，效果如下：
代码如下，先上HTML部分：
处理环节：
class="delate-time"
:
v-for="(item, index) in detailContent.handle_list"
:key="index"
>{{item.h_time}}
v-for="(item, index) in detailContent.handle_list"
:key="index"
:title="item.department"
:description="item.h_result==='null'?'':item.h_result"
asp查看源码配置ui
>
然后是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，于是就有了下⾯的计算：
:
// 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值，即可让时间轴按我们想要的结果进⾏显⽰了
// 这是我想到的⼀个解决⽅法，可能也会有些不对或者不⾜的地⽅，如果⼤家有什么更好的⽅法或者插件，可以指出来互相学习⼀下
&lbrack；转]vue Element UI⾛马灯组件重写
封装⼀个优雅的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组件⾃定义合计栏&comma；后台给的数据
合计的数据是后台传的，所以⽤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, 修改中下⾯代码: // For ios6.0 a ...
delphi android 中 Toast 的实现(⽼外写的UNIT)
浮出层的css写法，完美兼容IE6~10
利⽤元素间的绝对定位差⼀像素，使⽤不同颜⾊做出浮出层⼩三⾓的效果，完美兼容各浏览器! html部分:
Splunk作为⽇志分析平台与Ossec进⾏联动
背景: Ossec安装后⽤了⼀段时间的analogi作为ossec的报警信息显⽰平台，但是查看报警分类信息. 以及相关图标展⽰等⽅⾯总有那么⼀点点的差强⼈意，难以分析.因此使⽤逼格⾼⼀点的splunk ...
ListView控件的Insert、Edit和Delete功能(第⼆部分)
本系列⽂章将通过⼀个简单的实例，结合我⾃⼰使⽤ListView的情况，展⽰如何⽤ASP.NET 3.5 ListView控件进⾏基本的Insert.Edit和Delete操作. 系统要求: Windo ...
⾼可⽤性的负载均衡⽅案之lvs+keepalived和haproxy+heartbeat区别
⾼可⽤性的负载均衡⽅案 ⽬前使⽤⽐较多的就是标题中提到的这两者，其实lvs和haproxy都是实现的负载均衡的作⽤,keepalived和heartbeat都是提⾼⾼可⽤性的，避免单点故障.那么他们为 ...
1)django-建⽴步骤和⽬录说明
⼀：前⾔ django是python最流⾏的WEB框架. ⼆:django安装 pip install django 三:django项⽬建⽴步骤 1.创建django⼯程 django-admin ...
VUE CLI 3.0 安装及创建项⽬

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。