el-table 中第一列被移到最后一列的原因及解决方案

原因：

由于 el-table-column 上包裹了一层 div 导致，只要把div去掉即可。

使用循环实现图表渲染的具体代码如下：

我实现了一个自动滚动的效果，代码也直接贴进去了。

<el-table
      :data="tableData"
      style="width: 100%"
      ref="table"
      height="100%"
      :cell-style="{textAlign:'center'}"
      :header-cell-style="{textAlign:'center'}"
      @cell-mouse-enter="handleMouseEnter"
      @cell-mouse-leave="handleMouseLeave"
    >
          <el-table-column
            v-for="(item, index) in tableHead" :key="index"
            :prop="item.name"
            :label="item.comment"
            :width="thWidth"
          >
          </el-table-column>
 </el-table>
mounted() {
     this.toScroll()
  },
  methods： {
	// 自动滚动事件
    toScroll(){
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      this.id = setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 1
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop + 1 >= divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0
        }
      }, 100)
    },
    // 鼠标进入事件
    handleMouseEnter(){
      if(this.isScroll){
        clearInterval(this.id)
      }
    },
    // 鼠标离开事件
    handleMouseLeave(){
      if(this.isScroll){
        this.toScroll()
      }
    }
}