用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); }
}