element-ui的Table表格变成左右结构，表头在最左边

要将element-ui的Table表格变成左右结构，并将表头放在最左边，可以使用以下方法：

1. 使用CSS将表格的布局变为左右结构

在table的外层容器上，设置display:flex，将其子元素水平排列，并使用flex:1将表格和表头分别占据左右两个区域。

例如：

.table-container {
  display: flex;
  width: 100%;
  height: 100%;
}
.left {
  flex: 1;
}
.right {
  flex: 1;
}

2. 将表头移动到最左边

element-ui的表头是由TableColumn组件构成的，可以通过自定义该组件的render方法来调整表头的位置。

在TableColumn的render方法中，使用v-show将表头内容隐藏。然后在最左侧添加一个固定宽度的单元格，作为表头的占位符。

例如：

<el-table-column prop="name" label="姓名" width="100" :render-header="renderHeader">
</el-table-column>

methods: {
  renderHeader(h, {column}) {
    // 隐藏表头内容
     = ;
     = '';
    // 返回一个自定义的表头单元格
    return h('el-table-column', {props: {width: '50'}}, );
  }
}

完整的示例代码如下：

<template>
  <div class="table-container">
    <el-table class="left" :data="tableData" style="width:100%">
      <el-table-column prop="name" label="姓名" width="100" :render-header="renderHeader">
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="100">
      </el-table-column>
    </el-table>
    <el-table class="right" :data="tableData" style="width:100%">
      <el-table-column prop="job" label="职业" width="100">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="200">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{
        name: '张三',
        age: 24,
        job: '工程师',
        address: '北京市海淀区'
      }, {
        name: '李四',
        age: 28,
        job: '设计师',
        address: '上海市浦东新区'
      }, {
        name: '王五',
        age: 32,
        job: '销售员',
        address: '广州市天河区'
      }]
    }
  },
  methods: {
    renderHeader(h, {column}) {
       // 隐藏表头内容
        = ;
        = '';
       // 返回一个自定义的表头单元格
       return h('el-table-column', {props: {width: '50'}}, );
    }
  }
}
</script>
<style>
.table-container {
  display: flex;
  width: 100%;
  height: 100%;
}
.left {
  flex: 1;
}
.right {
  flex: 1;
}
</style>