element-ui中页面缩放时table表格内容错位的解决

为了解决element-ui中页面缩放时table表格内容错位的问题，我们可以采用以下措施：

1. CSS调整

在表格的父元素中添加CSS样式，使其在缩放时保持宽度不变：

.parent {
  overflow: auto;
  white-space: nowrap;
}

其中，overflow: auto表示在缩放时出现滚动条；white-space: nowrap表示表格内容不换行。

2. 组件参数调整

通过设置el-table-column组件的resizable属性为false，防止表格列宽发生变化，影响表格内容的位置：

<el-table-column
  prop="name"
  label="Name"
  :resizable="false">
</el-table-column>

注意：由于resizable属性默认值为true，所以需要显式设置为false才能生效。

示例说明

示例1

假设我们有一个简单的表格，在页面缩放时表格内容出现错位的问题：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2022-01-01', name: '张三', address: '北京市' },
        { date: '2022-01-02', name: '李四', address: '上海市' },
        { date: '2022-01-03', name: '王五', address: '广州市' },
      ]
    };
  }
}
</script>

为了解决这个问题，我们可以在表格的父元素中添加上述CSS样式：

<template>
  <div class="parent">
    <el-table :data="tableData">
      <!-- 省略 -->
    </el-table>
  </div>
</template>

<style>
.parent {
  overflow: auto;
  white-space: nowrap;
}
</style>

运行后发现，在页面缩放时表格内容已经不再错位。

示例2

另外一个解决方案是，通过设置el-table-column组件的resizable属性为false，使表格列宽不发生变化，保证表格内容的位置不变：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名" :resizable="false"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

在这个示例中，姓名列的宽度被设置为不可调整，表格内容在缩放时不会出现错位。