基于elementUI竖向表格、和并列的案例

效果图如下

代码

补充知识：基于Vue element-ui实现支持多级纵向动态表头的仿表格布局

需求图示如下，多级纵向动态表头表格：

我的思路是用element-ui的layout实现，做出一个仿造表格，能够支持动态的、多级的、纵向的表头：

.el-row {
 margin-bottom: 0px; 
 border: 1px solid #e6e6e6;
 margin: -1px -1px -1px -1px; 
 &:last-child {
 margin-bottom: 0px;
 }
}
.bg-purple {
}
.bg-purple-light {
 background: #121927;
}
.grid-content {
 border: 0px solid rgb(0, 0, 0);
 min-height: 50px;
}
.grid-content-sub {
 border: 0px solid rgb(0, 0, 0);
 padding: 20px;
}
.grid-content-large {
 border: 0px solid rgb(0, 0, 0);
 padding: 70px;
 height: 60px;
}
.grid-content-large-sub {
 border: 0px solid rgb(0, 0, 0);
 padding: 20px;
 height: 57.5px;
}

实现图如下

以上这篇基于elementUI竖向表格、和并列的案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。