vue 表格固定列，表格另一侧滑动

实现表格固定列，右半部分依旧可以互动效果，如下图：

解决思路：
写两个<table> ：
一个是整体的table，table外侧的div保持宽度固定和overflow:scroll，内部的table宽度大于外部才能滚动起来；
一个是固定再左侧的table，固定的这个table内容只有固定显示的这部分，同时，position:absolute在左侧，相当于就是给那个表格盖一层；

实际效果可以参考学习：
https://www.antdv.com/components/table-cn/#%E5%9B%BA%E5%AE%9A%E5%88%97

解决思路如上，如参考代码，可看附：

<template>
  <div class="product-list">
    <!-- 可滑动的全表格 -->
    <div class="table-scroll-container">
    <table class="table-scroll" border="0" cellpadding="0" cellspacing="0">
      <tbody class="tbody">
      <tr class="title-tr">
        <th class="first-col">title1</th>
        <th class="ta-c">产品2</th>
        <th class="ta-c">产品3</th>
        <th class="ta-c">产品4</th>
        <th class="ta-c">产品5</th>
        <th class="ta-c">产品6</th>
      </tr>
      <template>
        <tr class="class-tr">
          <td colspan="6">class1</td>
        </tr>
        <tr class="tbody-content">
          <td class="first-col clearfix" >
            <div class="first-col-cont">
              <div class="info-logo"></div>
              <div class="info">
                <div class="info-title">hi</div>
                <div>王</div>
              </div>
            </div>
          </td>
          <td class="info-box"><van-image class="info-img" :src="require('../../assets/product/ok.png')" /></td>
          <td class="info-box"><van-image class="info-img" :src="require('../../assets/product/ok.png')" /></td>
          <td class="info-box"><van-image class="info-img" :src="require('../../assets/product/ok.png')" /></td>
          <td class="info-box"><van-image class="info-img" :src="require('../../assets/product/ok.png')" /></td>
          <td class="info-box"><van-image class="info-img" :src="require('../../assets/product/ok.png')" /></td>
        </tr>
      </template>
      </tbody>
    </table>
    </div>
    <!-- 覆盖的左侧表格 -->
    <div class="table-left-container">
    <table class="table-left" border="0" cellpadding="0" cellspacing="0">
      <tbody class="tbody">
      <tr class="title-tr">
        <th class="first-col">title1</th>
      </tr>
      <template>
        <tr class="class-tr">
          <td colspan="5">class1</td>
        </tr>
        <tr class="tbody-content">
          <td class="first-col clearfix" >
            <div class="first-col-cont">
              <div class="info-logo"></div>
              <div class="info">
                <div class="info-title">hi</div>
                <div>王</div>
              </div>
            </div>
          </td>
        </tr>
      </template>
      </tbody>
    </table>
    </div>
  </div>
</template>

<script>
  import { Image as VanImage } from 'vant';
export default {
  components: {
    VanImage
  },
  data() {
    return {};
  }
};
</script>

<style scoped lang="less">
  .product-list{
    position: relative;
    .table-left{
      width: 152px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      background: #fff;
      border-collapse: collapse;
      text-align: left;
      .tbody-content {
        border-bottom: 0;
        .first-col {
          border-bottom: 0;
        }
      }
    }
    .table-scroll-container {
      overflow-x: scroll;
      overflow-y: hidden;
      width: 100%;
    }
    .table-scroll{
      width: 472px;
      border-collapse: collapse;
      text-align: left;
    }
    .title-tr{
      border-bottom: 1px solid #EDEDED;
      height:17px;
      font-size:12px;
      font-weight:400;
      color: #666;
      line-height:17px;
      .first-col {
        height: 32px;
        border-bottom: 0;
      }
    }
    .tbody {
      .tbody-content{
        td {
          border-right: 1px solid #EDEDED;
          border-bottom: 1px solid #EDEDED;
        }
      }
    }
    .class-tr {
      background-color: #F5F5F5;
      width:48px;
      height:24px;
      font-size:12px;
      color:#666;
      line-height:20px;
      box-sizing: border-box;
      border-bottom: 1px solid #EDEDED;
      td {
        padding-left: 16px;
      }
    }
    .first-col {
      width: 152px;
      height: 56px;
      box-sizing: border-box;
      padding: 8px 6px 8px 16px;
      .first-col-cont {
        width: 152px;
      }
      .info-logo {
        position: relative;
        top: 8px;
        float: left;
        width: 24px;
        height: 24px;
        border-radius: 24px;
        background-color: rgba(216, 216, 216, 1);
        margin-right: 8px;
      }

      .info {
        line-height: 20px;
        font-size: 12px;
        color: #999;
        .info-title {
          color: rgba(0, 0, 0, 0.9);
        }
      }
    }
    .info-box {
      width: 64px;
      height: 56px;
      text-align: center;
      box-sizing: border-box;
      .info-img {
        float: left;
        width: 20px;
        margin-left: 20px;
        img {
          width: 20px;
        }
      }
    }
    div::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
  .ta-c {
    text-align: center;
  }
</style>