elementUi table fixed 错位问题

在使用el-table的fixed属性固定尾列时出现错位问题

首先讲一下网上其他人的解决方案 通过el-table的doLayout对表格重新布局，适用于初次渲染正常，数据刷新后错位的场景

1. 在el-table里绑定ref

<el-table
   :data="tableData1"
   ref="table"
>
</el-table>

2. 在数据更新时调用doLayout方法

 this.$nextTick(() => {
        this.$refs.table.doLayout();
        // el-table加ref="table"
      });

通过这种方法，很多小伙伴的问题就已经解决了，可惜我的场景不同，进入页面后的初次渲染就已经错位 排查很久最终发现与表格行高有关，最终通过以下方法解决

1. 通过:row-style="{}"设置行高

      <el-table
          ref="table"
          :data="tableData"
          border
          style="width: 100%"
          :row-style="{height: '60px'}"
      >

如果行高足够大，你会发现问题已经解决，但显然，行高太高过于突兀。 可以通过调整el-table-column的width，貌似内容在两行以内就不会错位。或者使用:show-overflow-tooltip='true'将超出的内容隐藏，以鼠标悬浮显示提示框的方式展示

<el-table-column prop="projectName" label="项目名称" min-width="180" :show-overflow-tooltip='true'></el-table-column>

调整完就不再错位了