一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
【前言】不二小菜鸡很少写这个，大神勿喷啊！！！就是记录一下
大家有没有见过长这样的表格，当初看了原型真想好好表扬下产品。既然上有产品，下就有代码
看起来很简单啊，首先分析一下，这里有三层的嵌套关系，第一层的部门名称，第二层是工作模块，第三层就是指标名称和指标权重了，不难看出啊,就是一个简单的行合并。（说明一下，可以用element-ui里table的行合并去解决，但是不二觉得里面的计算可能复杂一些，所有就用了css去处理了）
{id: '2',name: '王小虎1',amount1: '2342',amount2: '3.2'},
{id: '3',name: '王小虎1',amount1: '2343',amount2: '3.2'},
{id: '4',name: '王小虎2',amount1: '2344',amount2: '3.2'},
{id: '5',name: '王小虎2',amount1: '2345',amount2: '3.2'},
{id: '6',name: '王小虎3',amount1: '2346',amount2: '3.2'},
{id: '7',name: '王小虎3',amount1: '2347',amount2: '3.2'},
使用table就是后台正常返回的数据，像上面这样
这是使用css布局所需要的数据（不好看啊，可以对照上面的图看），数据结构是这样的，但是后端小朋友会费心一些，哈哈~ 下面是我实现的代码（vue）,html部分如下：
<div class="tabHead flex alCen">
<p class="name name1">部门名称</p>
<p class="name name2">工作模块</p>
<p class="name name3">指标名称</p>
<p class="name name4">指标权重</p>
</div>
<div class="tabBody" v-if="tableallView.length!=0">
<div class="tabBodyItem flex alCen" v-for="(pItem,pIndex) in tableallView" :key="pIndex">
<div class="name name1 ellipsis-1" :title="pItem.deptName" @click="toDepDetail(pItem)">{{pItem.deptName}}</div>
<div class="classs">
<div class="classItem flex alCen" v-for="(item,index) in pItem.workList" :key="index">
<p class="title2 name ellipsis-1" :title="item.workModule+'('+item.titlescore+')'">{{item.workModule}}({{item.titlescore}})</p>
<div class="list">
<div class="item flex alCen" v-for="(zItem,zIndex) in item.titleList" :key="zIndex">
<p class="title3 ellipsis-1" :title="zItem.title">{{zItem.title}}</p>
<p class="desc">{{zItem.targetWeight}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="nullData flex alCen js-center" v-else>
<p>暂无数据</p>
</div>
</div>
css代码如下：
.customtable{
min-width: 858px;
border-left: 1px solid rgba(51, 51, 51, 0.23);
border-top: 1px solid rgba(51, 51, 51, 0.23);
.tabHead{
border-bottom: 1px solid rgba(51, 51, 51, 0.23);
background-color: rgba(45, 140, 240, 0.04);
.name{
line-height: 40px;
text-align: center;
font-size: 14px;
border-right: 1px solid rgba(51, 51, 51, 0.23);
}
.name1{
width: 200px;
}
.name2{
width: 300px;
}
.name3{
width: 299px;
}
.name4{
flex:1;
}
}
.tabBody{
border-right: 1px solid rgba(51, 51, 51, 0.23);
.tabBodyItem{
font-size: 14px;
border-bottom: 1px solid rgba(51, 51, 51, 0.23);
.name1{
width: 199px;
cursor: pointer;
}
.name{
text-align: center;
font-size: 14px;
}
.classs{
flex:1;
border-left: 1px solid rgba(51, 51, 51, 0.23);
.classItem{
border-bottom: 1px solid rgba(51, 51, 51, 0.23);
.title2{
width: 299px;
text-align: center;
padding: 0 10px;
box-sizing: border-box;
}
.list{
border-left: 1px solid rgba(51, 51, 51, 0.23);
flex: 1;
.item{
.title3{
width: 299px;
text-align: center;
line-height: 40px;
border-bottom: 1px solid rgba(51, 51, 51, 0.23);
border-right: 1px solid rgba(51, 51, 51, 0.23);
padding: 0 10px;
box-sizing: border-box;
}
.desc{
flex:1;
text-align: center;
line-height: 40px;
border-bottom: 1px solid rgba(51, 51, 51, 0.23);
}
}
.item:last-child .title3, .item:last-child .desc{
border-bottom: none;
}
}
}
.classItem:last-child{
border-bottom: none;
}
}
}
}
.nullData{
border-right: 1px solid rgba(51, 51, 51, 0.23);
border-bottom: 1px solid rgba(51, 51, 51, 0.23);
line-height: 40px;
color: #666666;
}
}
个人认为这种这种方法也值得记录一下哈，当然，使用element-ui的table也实现了，是:span-method这个方法，有兴趣的同学可以去文档看看。以上是我的分享了，不妨去造一个json数据试试看喽~
