el-table行列错位对不齐断行断列问题_el-table错位

问题描述

拖动表头改变了列的宽度的时候，发现出现行列错位、对不齐问题。

把 fixed 拿掉正常 ，然后就测试了一下，发现使用fixed属性之后，就会容易在各种场景出现表格错位的问题。

解决方案：

查阅element-ui官网，发现官网提供了doLayout方法来解决这个问题。

1. 拖动表头导致错位
   我这里使用了 header-dragend

<el-table
      ref="table"
      border
      style="width: 100%"
      :height="curTableHeight"
      :data="tableData"
      :span-method="objectSpanMethod"
      :cell-style="tableCellStyle"
      :header-cell-style="tableHeaderCellStyle"
      @header-dragend="headerDragend"
    >
1
2
3
4
5
6
7
8
9
10
11

headerDragend() {
      if (this.$refs.table && this.$refs.table.doLayout) {
        this.$refs.table.doLayout();
      }
    },
1
2
3
4
5

2. 数据更新后出现的错位
   也是一样 直接在数据赋值后执行doLayout方法

if (this.$refs.table && this.$refs.table.doLayout) {
        this.$refs.table.doLayout();
      }
1
2
3