组件默认是把文字和时间放到一起显示,如果想要时间放一边,文字放一边,同时还有较好的适应性,可以考虑如下做法:
在el-timeline-item的v-for循环中写span来显示时间,子元素span可以拿到父元素el-timeline-item每次循环的数组对象的值,从而用来展示时间,最后用定位把span定到合适的位置(可以使用elementui给的placement属性来隐藏时间,这样可以在span中直接调时间。placement属性只有top和bottom的值,所以可以设置其为left来屏蔽时间显示)
<el-timeline class="rightfirst-bottom-right"> <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon" :type="activity.type" :color="activity.color" :size="activity.size" :timestamp="activity.timestamp" placement="left" > <div class="rightfirst-bottom-right-left"> <span>{{ activity.timestamp }}</span> </div> {{ activity.content }} </el-timeline-item> </el-timeline>
切记不要改elementui中未暴露出来的样式,会出现无法预测的情况。
(还有一种待实验的方法:去掉scoped或许可以更改elementui中未暴露出来的属性,但是要在当前样式的最外层套上一层来消除全局样式污染;但是这样更改会出现什么情况同样也是不可预测的)