ElementUI 表格列 错位问题

现象：

    在开发后台管理项目中不止一次碰见过elementUI表格错位问题。如下图所示

多少度

表格出现问题的共同点有：

    1.通过复选框的选中与否来控制表格中的一些列是展示还是隐藏

    2.有固定的列

    3.有横向滚动条

    4.表格高度动态控制

解决方案：

    解决方案也是多种尝试后才找出来的，试过el-table-column 加 key；也试过动态隐藏展示的列由v-if改为v-show，多级表格时修改嵌套关系等等都不行。

    最后发现el-table 也动态控制展示与隐藏式是可以解决错乱问题的，于是在el-table上加上了v-if，如下代码所示：

<el-table

        v-if="!loading.table"

        ref="table"

        v-loading="loading.table"

        :height="tableHeight"

        :data="tableData"

        :default-sort="{ prop: 'date', order: 'descending' }"

        :summary-method="getSummaries"

        show-summary

        @sort-change="hanleSort"

      >.........</el-table>

    这样虽然可以解决表格错乱问题，但是会有另外一个现象就是，每次请求接口后，表格区域会闪烁一下，体验不是很好。

又想 v-if 其实就是重新渲染表格而已。最后发现elementUI官网中有一个方法，如下图所示：

所以拿到数据请求结果后，使用element table doLayout方法进行强制重新渲染，如下代码：

this.$nextTick(() => {

          this.$refs.table.doLayout()

        })

Element 2.0.5 已发布，开放 Table 的 doLayout 方法，用于重新计算 Table 的布局，所以大于这个版本的，都可以使用doLayout方法。

很友好的解决了表格错乱问题，困扰很久后发现还是多看看官网API吧，这样有利于你我他~~