【vue】element ui 表格优化——解决显示错位问题

【问题描述】

ElementUI el-table 动态显示表格的时候，会发生显示错位的情况，拖拽一下又恢复正常了，这是要逼死强迫症

【解决办法】

1. 给表格添加ref标志

  <el-table ref="tableRef" :data="tableData"></el-table>

2. doLayout 对 Table 进行重新布局

具体参看：Element - The world's most popular Vue UI framework

watch: {
      // tableData是el-table绑定的数据
      tableData: {
        // 解决表格显示错位问题
        handler () {
          this.$nextTick(() => {
            // tableRef是el-table绑定的ref属性值
            this.$refs.tableRef.doLayout() // 对 Table 进行重新布局
          })
        },
        deep: true
      }
    }

【参考】

element-ui中的el-table表头错位 - 简书

---

#遗留问题=>如何实现表格内容不换行列宽自适应

（几乎）完美实现 el-table 列宽自适应 - 李中凯 - 博客园

https://github.com/kaysonli/v-fit-columns

照着上面这个方式试了一下，很不幸，实验失败了，可能我的表写的有点复杂，不太适合用这个插件