element-table横向自适应

写在前面：我前两天遇到了一个听起来很常见的需求，就是element-table组件在内容宽度超过table宽度后显示横向滚动条。在我写的时候发现，table并没有提供这样一个功能。所以就需要自己去算出内容最长的宽度，给到table，超出了就会自动有滚动条

知识点一、动态的ref

因为要知道最长的元素宽度，所以得知道每一行的宽度再取最大值。这个功能一般用动态的ref可以实现
根据数据给每一行添加ref，这个ref一定得是唯一值

 <template v-slot:content="{ row }">
     <div class="vte-table__div--content" :ref="row.content">
       <span>{{row.content}}</span>
     </div>
 </template>

在获取数据时获取对应的元素

const widthList = []
setTimeout(() => {
     res.data.map(item => {
        //  算出每一行内容的宽度然后放到一起
        const width = this.$refs[item.content].clientWidth
        widthList.push(width)
     })
      const columns = this.$refs.tablePro.columns
      // 并取出最大值，并付给需要超出滚动的地方
      columns[8].minWidth = (Math.max(...widthList) + 40) | 100
}, 0)

知识点二、元素的渲染顺序

在以上代码中可以看到，我在拿宽度的时候加了setTimeout。因为直接拿的宽度是0，但是我打印出来又是正确的，冥想三分钟之后。发现这个问题好像之前碰到过...，就是因为数据刚出来，元素还没渲染上去，所以拿的宽度是0，得等他一会再拿数据