vue实现表格表头在左侧，并且固定表头

在Vue中实现固定表头并将表头在左侧，可以使用CSS样式来实现。以下是一个简单的示例：

<template>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>表头1</th>
          <th>表头2</th>
          <th>表头3</th>
          <!-- 其他表头 -->
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
          <td>{{ item.field3 }}</td>
          <!-- 其他字段 -->
        </tr>
      </tbody>
    </table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        // 数据列表
      ]
    };
  }
};
</script>
 
<style scoped>
.table-container {
  overflow-y: auto;
  height: 400px; /* 根据需要设置高度 */
  width: 100%;
}
 
table {
  width: 100%;
  border-collapse: collapse;
}
 
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
 
thead th {
  background-color: #f9f9f9;
  position: sticky;
  top: 0;
  z-index: 10;
}
 
tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

在这个例子中，.table-container 是一个固定高度的容器，用于包含表格。overflow-y: auto 允许容器内部有滚动条，而滚动条之外的表头会固定在顶部。position: sticky 和 top: 0 属性用于将表头固定在顶部。z-index 确保表头在内容之上。

请根据实际需求调整表格的样式和数据。