Vue +原生固定table表头，body上下滚动，内容对应与横向滚动条

描述：
根据返回数据动态渲染table数据，表头数量不确定（属性不确定或者说是多少列不确定）,这样的话就排除了手动设置列宽的做法，每列平均分也并不可取（有点丑）;然后将body数据设置动态高度，超出设置为滚动条。其实table的x轴也可以设置成超出滚动条，这样的话，就自定义了个表头固定，表体滚动显示，这个table x轴超出滚动。
解决思路
1、采用两个table列表，他们的数据一模一样，以保证他们的高、宽、内容全部都完全一致；
2、table2采用定位的方法与table1两个列表完全重合（table2必须在上面，就是层级），table1的thead部分正常显示，table2的thead将其opacity:设置为0，height设置0;其中的tr th 的height也设置为0；
目的是将其table2的thead隐藏，切不可将display设置为none（会出现table1、与table2的内容不能一一对应）；
如：

.table2 {
         border-top: 0;
         border-bottom: 0;
          thead {
           opacity: 0;
           height: 0;
            tr {
              height: 0;
               th {
                 height: 0;
                 line-height: 0;
                 }
               }
           }
}

3、在table2的外面设置个div盒子，将第二步的定位换到这个div上（这样不一步到位是方便理解），使用定位top属性控制table2的tbody与其table1的tbody重合（就是thead的高度），再将table1的tbody的opacity设置为0（即：工具人理解）；
div在于动态控制table2的动态超出纵向滚动条，设置其相较于父级的最大高度超出显示滚动条，因为table2的thead已经隐藏了，height为0了，所以整个table的高度即为table2的tbody的高度，滚动显示的内容即为只有tbody的内容。

即：如果只需要实现固定表头，tbody滚动就到此为止了；
部分参考代码代码如下（仅供参考）：

<div class="table">
    <table class="table1" v-if="item.list&&item.list.length>0">
       <thead>
     <tr>
<th v-for="(item,key,index) in item.properties" :key="index">{{key}}</th>
     </tr>
       </thead>
       <tbody>
           <tr v-for="(item,index) in item.list" :key="index">
             <td v-for="(item,key,index) in item" :key="index">{{item}}</td>
           </tr>
        </tbody>
   </table>
  <div class="table2BBox">
    <table class="table2" v-if="item.list&&item.list.length>0">
      <thead>
        <tr>
         <th v-for="(item,key,index) in item.properties"
             :key="index" :title="key">{{key}}</th>
        </tr>
      </thead>
      <tbody>
       <tr v-for="(item,index) in item.list" :key="index">
         <td v-for="(item,key,index) in item" :key="index":title="item"
         >{{item}}</td>
       </tr>
     </tbody>
   </table>
  </div>
</div>

.table2BBox {
                      min-width: 100%;
                      position: absolute;
                      top: 0;
                      left: 31;//thead高度
                      max-height: calc(100% - 31px);
                      overflow: hidden;
                      border-top: 1px solid #0c6c8b;
                      display: flex;
                      flex-direction: column;
                        overflow-y: auto;
                        overflow-x: hidden;
                        .table2 {
                          border-top: 0;
                          border-bottom: 0;
                          thead {
                            opacity: 0;
                            height: 0;
                            tr {
                              height: 0;
                              th {
                                height: 0;
                                line-height: 0;
                              }
                            }
                          }
                          tbody {
                          }
                        }
                      }
                    }

效果如图：

补充
如想要实现横向滚动条，需要在两个table外面设置一div，仅仅只管横向滚动条即可；
如：

 .table {
          max-height: 100%;
          overflow-x: auto;
          overflow-y: hidden;
          border: 1px solid #0c6c8b;
}

效果如图：