el-table纵向表头固定 其余数据为动态

效果如下：

左侧为固定表头，

<el-table  class='tableBttom'  ref="tableRef" :data="getIValues" :show-header="false"  border>
  <el-table-column
    v-for="(item, index) in getIHeaders"
    :key="index"
    :prop="item"
    width='120px'
    :fixed="index<1?true:false"
    align="center">

  </el-table-column>
</el-table>

js：左侧表头 自定义 及 tableData表格数据

let iHeaders : any = ref([
  { label: '时刻', prop: 'time', width: 80, },
  { label: '模拟出清电力-智能推荐(MW)', prop: 'recommendClear',   },
 
]);

let tableData: any = ref([{}]);

方法：

const getIHeaders = computed(() => {
  return tableData.value.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
})

const getIValues = computed(() => {
  return iHeaders.value.map(item => {
   return tableData.value.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { title: item.label })
  })

})

内容列过多 出现横向滚动条

.table-Scroll {
  width:100%;
  overflow-x: scroll !important;

里面的fixed 是让左侧的表头固定