用table展示表头和侧边都是动态

 此为大致模板可按需求改

 

<div class="produceBody2"><div v-show="loading" class="load1" v-cloak><div class="jz_flex"><div style="width:120px"><div class="jz_flex"><div class="loader"></div></div><div class="load2">数据加载中...</div></div></div></div>  <div class="tableWarp" style='overflow:auto'  v-show="!loading"  v-cloak><table style="white-space: nowrap" v-show='XList&&XList.length>0'  ><tbody><tr class="trTop"><td v-for="(item1, index1) in XList" colspan="1" :class=" index1==0?'title_hui2':'title_hui'">{{ index1!=0?item1.name:'' }}</td></tr><tr v-if="YList && YList.length > 0" v-for="(item2, index2) in YList"><td colspan="1" class="leftHead"><div> {{ item2.name}}</div></td><td colspan="1" v-for="(item3, index3) in item2.workshopList" ><div  @click="jumpClick(item2, item2.workshopList[index3])"   class="jdwarp">  
{{item3.name}}</div></td></tr></tbody></table><div v-show="!XList || XList.length <= 0" class="developing"><i class="el-icon-info huicolor"></i> 暂无数据</div></div>
</div>

  data() {return {  
XList:[{name:'x1',},{name:'x2',},{name:'x3',},{name:'x4',},{name:'x4',}],YList:[{name:'y1',workshopList:[{name:'子1'},{name:'子2'},{name:'子3'},{name:'子4'}]},{name:'y2',},{name:'y3',}],}

  table {border-collapse: collapse;text-align: center;table-layout: fixed;width: 100%;font-size: 14px;.table_thead {background: #ddd;display: table-header-group;line-height: 40px;font-size: 12px;}thead {background: #ddd;display: table-header-group;}.back {background: #ddd;}tr {width: 100%;// font-size: 12px;word-break: break-all;height: 85px;min-height: 85px;}th,td {// width: 100%;// border: 1px solid #f1f3f9;border: 1px solid #f1f3f9;padding: 8px;}
}

我的最终效果是

上面效果具体样式如下

<div class="produceBody2"><div v-show="loading" class="load1" v-cloak><div class="jz_flex"><div style="width:120px"><div class="jz_flex"><div class="loader"></div></div><div class="load2">数据加载中...</div></div></div></div>  <div class="tableWarp" style='overflow:auto'  v-show="!loading"  v-cloak><table style="white-space: nowrap" v-show='XList&&XList.length>0'  ><tbody><tr class="trTop"><td v-for="(item1, index1) in XList" colspan="1" :class=" index1==0?'title_hui2':'title_hui'">{{ index1!=0?item1.name:'' }}</td></tr><tr v-if="YList && YList.length > 0" v-for="(item2, index2) in YList"><td colspan="1" class="leftHead"><div> {{ item2.name}}</div></td><td colspan="1" v-for="(item3, index3) in item2.workshopList" ><div  @click="jumpClick(item2, item2.workshopList[index3])" v-if="item2.workshopList[index3].processId" class="jdwarp">  <div class="tableState1" @click="jump_batch('进行中',item2.workshopList[index3],item2)"><div class="icon_wai1" ><img src="../../assets/img/starting.png" class="StateIcon" ><div class="orangeTxt">进行中</div></div><div :class="item2.workshopList[index3].jxz=='0件/0㎡'||item2.workshopList[index3].jxz=='0件/0.0㎡'?'jdTxt_hui':'jdTxt'">：{{item2.workshopList[index3].jxz}}</div></div><div class="tableState" @click="jump_batch('未开始',item2.workshopList[index3],item2)"><div class="icon_wai1" ><img src="../../assets/img/notStarted.png" class="StateIcon" ><div class="blackTxt">未开始</div></div><div  :class="item2.workshopList[index3].wks=='0件/0㎡'||item2.workshopList[index3].wks=='0件/0.0㎡'?'jdTxt_hui':'jdTxt'">：{{item2.workshopList[index3].wks}}</div></div><div class="tableState" @click="jump_batch('今日完成',item2.workshopList[index3],item2)"><div class="icon_wai2" ><img src="../../assets/img/complet.png" class="StateIcon" ><div class="greenTxt">今日完成</div></div><div  :class="item2.workshopList[index3].ywc=='0件/0㎡'||item2.workshopList[index3].ywc=='0件/0.0㎡'?'jdTxt_hui':'jdTxt'">：{{item2.workshopList[index3].ywc}}</div></div></div></td></tr></tbody></table><div v-show="!XList || XList.length <= 0" class="developing"><i class="el-icon-info huicolor"></i> 暂无数据</div></div>
</div>

table {border-collapse: collapse;text-align: center;table-layout: fixed;width: 100%;font-size: 14px;.table_thead {background: #ddd;display: table-header-group;line-height: 40px;font-size: 12px;}thead {background: #ddd;display: table-header-group;}.back {background: #ddd;}tr {width: 100%;// font-size: 12px;word-break: break-all;height: 85px;min-height: 85px;}th,td {// width: 100%;// border: 1px solid #f1f3f9;border: 1px solid #f1f3f9;padding: 8px;}
}
.trTop{height:55px;
}
.title_hui {// width: 190px;width: 250px;background: #f1f2f1;
}.bluecolor {color: #409EFF;cursor: pointer;position: relative;
}
.huicolor {margin-right: 3px;color: #BBBBBB;
}.developing {min-height: 500px;color: #808080;font-size: 14px;display: flex;align-items: center;justify-content: center;margin-top: 100px;}
.lookIcon{height: 15px;width: 15px;margin-right: 5px;
}.title_hui2{background: #f1f2f1;width: 55px;height: 60px;
}
.leftHead{position: absolute;height: 85px;background: #f1f2f1;width: 65px;left: 10px;display: flex;align-items: center;justify-content: center;
}
.jdTxt{overflow: hidden; 
text-overflow: ellipsis;
white-space: nowrap; 
}
.jdTxt_hui{overflow: hidden; 
text-overflow: ellipsis;
white-space: nowrap; 
color: #999999;
}
.jdwarp{padding-left: 10px;padding-right: 10px;
}
.jz_flex{display: flex;
justify-content: center;
}
//加载的样式
.load1{margin-bottom: 150px;
margin-top: 150px;}.load2{display: flex;
justify-content: center;margin-top: 10px;
color: #3498db;
font-size: 14px;
}
.loader{border: 3px solid rgba(0, 0, 0, 0.1); /* 轻颜色的边框 */border-radius: 50%; /* 圆形 */border-top: 3px solid #3498db; /* 蓝色边框 */width: 28px; /* 加载器的宽度 */height: 28px; /* 加载器的高度 */animation: spin 1s linear infinite; /* 无限循环的旋转动画 */
}
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }
}