elementUI table 表头 宽度 动态调整

el-table 我们用的多了，但是el-table的列宽度，我们却很少去配置，当表格列多的时候，界面上会显示不了，列中的内容会自动换行；反之，表格后面有很大空间，不美观。

最近接到一个需求就是要表格内容的列宽要动态调整。

思路：

1.设置每一列的宽度的min-width

2.设置只能一行

3.在请求回调之后更新UI

首先我们先观察一下table的属性有没我们需要的，打印

console.log(this.$refs.table)

我们能看到相关数据，截图如下

我们能获取到一个columns的数组，这个数组就是代表了每一个列宽的的对象数组，里面有一个minWidth，以及width这两个关键数据，控制了当前列宽

还有一个属性data数组，它就是你传入table数据的属性，有了这这些关键属性，我们就可以处理了

首先，我写了一个全局混入mixin.js，后续可以在每个table调用，然后method 写了一个更新宽度方法，

我们就可以根据data里面的内容来计算min-width的宽度了

updateTableWidth() {
      this.$nextTick(() => {
        let table = this.$refs.table.$el
        for (let index = 0; index < this.$refs.table.table.length; index++) {
          this.$refs.table.columns[index].minWidth = 400
        }
      })
    }