elementUI表格tableixed=“right“ 导致固定列错位的解决方法

html 复制代码

<el-table ref="table" :data="crud.data" :height="tableHeight"  :header-cell-style="{ background :key="tableKey">
 <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
     <el-table-column  label="操作"
     align="center" fixed="right"  width="168">
     </el-table-column>
  </el-table>

这里面增加了 :key="tableKey"

javascript 复制代码

<script>
  export default {
    data() {
      return {
        tableKey: 0,
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    },
      // CRUD 钩子：数据刷新后重新计算表格布局(这是本人 你们可以试试的时候可以忽略)
  [CRUD.HOOK.afterRefresh]() {
    this.$nextTick(() => {
      if (this.$refs && this.$refs.table && this.$refs.table.doLayout) {
        this.$refs.table.doLayout();
      }
    });
  },
    watch: {
    // 当表格数据或其内部内容变化后，重新计算布局，避免固定列与主体错位
    'crud.data': {
      handler() {
        this.$nextTick(() => {
          if (this.$refs && this.$refs.table && this.$refs.table.doLayout) {
            this.$refs.table.doLayout();
          }
        });
      },
      deep: true
    },
    updated() {
        // 数据更新后重新计算表格布局，解决固定列错位问题
       this.$nextTick(() => {
          if (this.$refs.table) {
            this.$refs.table.doLayout();
          }
       });
    },

  }
</script>

css 复制代码

/* 解决 Element UI 表格 fixed 列错位问题 */
::v-deep .el-table__fixed,
::v-deep .el-table__fixed-right {
  height: 100% !important;
}

::v-deep .el-table__fixed-right-patch {
  background-color: #ecf2fd;
}

/* 确保表格内容不会溢出 */
::v-deep .el-table__body-wrapper {
  overflow-x: auto;
}

/* 固定列阴影优化 */
::v-deep .el-table__fixed-right::before {
  box-shadow: -1px 0 8px rgba(0, 0, 0, 0.1);
}

1. 添加表格强制刷新机制

在 el-table 上添加了 :key="tableKey" 属性（第257行）
在 data 中添加了 tableKey: 0 用于强制重渲染

2. 添加数据变化监听

已有的 watch 监听 crud.data 变化（第812-822行），数据变化时自动调用 doLayout()

3. 添加生命周期钩子

在 mounted 钩子中调用 doLayout()（第1239-1243行）
新增 updated 钩子，在组件更新后重新计算布局（第1244-1252行）

4. 添加 CRUD 钩子（可以忽略）

新增 [CRUD.HOOK.afterRefresh]() 钩子（第809-817行），在数据刷新后重新计算表格布局

5. 优化样式

添加了针对固定列的样式修复（第3678-3698行）：
- 强制固定列高度为 100%
- 优化固定列补丁背景色
- 确保表格内容不溢出
- 优化固定列阴影效果