<template>
  <div class="widget-table can-not-copy"  >
    <div :class="{ letScroll: fixed }"  ref="tableBox">
      <table
        :key="keyCode"
        cellpadding="5"
        id="widget-table"
        width="100%"
        :border="String(configData.border) === '1' ? '1' : '0'"
        bordercolor="#dedde6"
        ref="table"
      >
        <th
          v-for="(title, index) of chartData.tableTitle"
          :key="index"
          :class="[
            'align-' + configData.align,
            'border-' + configData.border,
            { 'first-th-fixed': index === 0 && fixed },
            { 'last-th': index + 1 === chartData.tableTitle.length },
          ]"
        >
          <span>{{ title.title }}</span>
        </th>
        <tr
          v-for="(row, index) of chartData.tableList"
          :key="row[0]"
          :class="trClass(row, configData, chartData, index)"
        >
          <td
            v-for="(val, key, number) in row"
            :key="key"
            :class="{ 'first-th-fixed': number === 0 && fixed ,'leftHighLight':leftHighLight && number === 0 }"
          >
            
            <span>{{ dataFormat(number, row, chartData.tableTitle[number]) }}
                                </span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

  watch:{
    chartData(val){
      this.$nextTick(()=>{
        const bw = this.$refs.tableBox.offsetWidth;
        const tw = this.$refs.table.clientWidth
        if(tw - 1 > bw) this.fixed = true
      })
    }
  },

// 给外层加上overflow-x:auto
.letScroll {
  overflow-x: auto;
}
// 给需要固定在左侧的列加上position:sticky  然后top/left/right/bottom任意之一加上数值即可
.first-th-fixed {
  position: sticky;
  position: -webkit-sticky;  // 重点
  left: -1px;
  // min-width:140px;
  &::after {
    content: "";
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0;
    width: 1px;
    // background-color: rgba(85, 85, 85, 0.2);
    box-shadow: 2px 0px 4px 0px rgba(85, 85, 85, 0.2);
  }
}

重点：在安卓真机测试生效，ios不生效，因为sticky没生效。
注意：必须加上 position: -webkit-sticky; ios才可以生效。

还有个问题： 滚动的时候，左侧列会抖动，还未解决。。。。。。

CSS中position属性介绍(新增sticky)

设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

sticky属性有以下几个特点：

该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。