vue element-ui里的table中表头与表格出现错位的解决

问题描述：
在使用 vue element-ui 中的 table 组件时，如果表格中的数据太多，在滚动时表头和表格容易出现错位的问题。

解决方法：
有两种方法可以解决这个问题：

方法一：通过设置样式来修复

可以通过设置表格容器的样式来解决表头和表格错位的问题。具体步骤如下：

1. 在父容器中设置样式，设置为相对定位（position: relative）；
2. 在表格容器中设置样式，设置为绝对定位（position: absolute），并设置 top 的值为表头的高度（element-ui 表头默认高度为 40px）；
3. 如果表格中有分页组件，还需要将分页组件的位置下移，避免与表格重合。

示例代码如下：

<template>
  <div class="wrapper">
    <div class="table-container">
      <el-table :data="tableData">
        <el-table-column prop="name" label="Name"></el-table-column>
        <el-table-column prop="age" label="Age"></el-table-column>
        <el-table-column prop="address" label="Address"></el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handlePageChange"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 100,
    };
  },
  created() {
    // 初始化数据
  },
  methods: {
    handlePageChange(page) {
      // 分页处理
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.table-container {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: calc(100% - 40px - 50px); // 50px 是分页组件的高度
  overflow: auto;
}

.pagination-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
}
</style>

方法二：通过设置 fixed 属性来修复

另一种解决方式是利用 element-ui 提供的 fixed 属性，将表头固定在页面顶部，不随滚动而移动。具体步骤如下：

1. 在 el-table 组件上添加 fixed-header 属性，固定表头；
2. 在 el-table-column 中添加 fixed 属性，固定列。

示例代码如下：

<template>
  <el-table :data="tableData" :height="height" fixed-header>
    <el-table-column prop="name" label="Name" align="center" width="150" fixed></el-table-column>
    <el-table-column prop="age" label="Age" align="center" width="150"></el-table-column>
    <el-table-column prop="address" label="Address" align="center"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      height: 600,
    };
  },
  created() {
    // 初始化数据
  },
};
</script>

两种方法都可以解决 vue element-ui 中 table 组件的表头和表格错位问题，可以根据实际情况选择合适的方式来解决。