寫在前面：我前兩天遇到了一個聽起來很常見的需求，就是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，得等他一會再拿數據