寫在前面：我前兩天遇到了一個(gè)聽起來(lái)很常見的需求，就是element-table組件在內(nèi)容寬度超過table寬度后顯示橫向滾動(dòng)條寝受。在我寫的時(shí)候發(fā)現(xiàn)讶踪，table并沒有提供這樣一個(gè)功能凿傅。所以就需要自己去算出內(nèi)容最長(zhǎng)的寬度蕴侣，給到table焰轻，超出了就會(huì)自動(dòng)有滾動(dòng)條
知識(shí)點(diǎn)一、動(dòng)態(tài)的ref
因?yàn)橐雷铋L(zhǎng)的元素寬度昆雀，所以得知道每一行的寬度再取最大值鹦马。這個(gè)功能一般用動(dòng)態(tài)的ref可以實(shí)現(xiàn)
根據(jù)數(shù)據(jù)給每一行添加ref胧谈，這個(gè)ref一定得是唯一值
<template v-slot:content="{ row }">
<div class="vte-table__div--content" :ref="row.content">
<span>{{row.content}}</span>
</div>
</template>
在獲取數(shù)據(jù)時(shí)獲取對(duì)應(yīng)的元素
const widthList = []
setTimeout(() => {
res.data.map(item => {
// 算出每一行內(nèi)容的寬度然后放到一起
const width = this.$refs[item.content].clientWidth
widthList.push(width)
})
const columns = this.$refs.tablePro.columns
// 并取出最大值，并付給需要超出滾動(dòng)的地方
columns[8].minWidth = (Math.max(...widthList) + 40) | 100
}, 0)
知識(shí)點(diǎn)二荸频、元素的渲染順序
在以上代碼中可以看到，我在拿寬度的時(shí)候加了setTimeout客冈。因?yàn)橹苯幽玫膶挾仁?旭从，但是我打印出來(lái)又是正確的，冥想三分鐘之后场仲。發(fā)現(xiàn)這個(gè)問題好像之前碰到過...和悦，就是因?yàn)閿?shù)據(jù)剛出來(lái)，元素還沒渲染上去渠缕，所以拿的寬度是0鸽素，得等他一會(huì)再拿數(shù)據(jù)
