el-table中出現(xiàn)的抖動(dòng)問題
為了提高項(xiàng)目中組件的復(fù)用性，一般我們都會(huì)使用 v-if 或 v-show 加在 el-table-column 上來實(shí)現(xiàn)不同場(chǎng)景下頁面內(nèi)容的展示
現(xiàn)象描述
頁面渲染出表格以及表格中的所有內(nèi)容，當(dāng)觸發(fā)表格中的自定義點(diǎn)擊事件或者切換tab頁時(shí)，表格里面的單元格和內(nèi)容行就會(huì)發(fā)生左右或者上下抖動(dòng)
問題尋源
由于表格中的 el-table 沒有采用固定列寬，而是采用動(dòng)態(tài)計(jì)算的列寬，并且有 v-if 或 v-show 來控制表格某一列的展示與隱藏，所以切換tab或者觸發(fā)點(diǎn)擊事件時(shí)使表格會(huì)被重新加載計(jì)算，從而出現(xiàn)抖動(dòng)的現(xiàn)象文章來源：http://www.zghlxwxcb.cn/news/detail-740821.html
解決方法
- 在table所在的dom更新后立刻對(duì)el-table進(jìn)行重新布局（也就是調(diào)用el-table的doLayout方法），例如在beforeUpdated生命周期中調(diào)用doLayout：
beforeUpdate() {
this.$nextTick(() => {
this.$refs.table.doLayout()
})
}
- 在有v-if或者v-show控制的el-table-column中綁定唯一的key值
<el-table ref="table" :data="list">
<el-table-column
show-overflow-tooltip
prop="account"
:label="$global.user_center.account"
align="center"
min-width="130"
v-if="showAccount"
:key="1">
<template slot-scope="scope">
{{ scope.row.account || '--' }}
</template>
</el-table-column>
<el-table-column
prop="name"
:label="$global.user_center.name"
v-if="showName"
:key="2">
<template slot-scope="scope">
{{ scope.row.name|| '--' }}
</template>
</el-table-column>
</el-table>
！注意：之前有試過綁定的key為隨機(jī)生成數(shù)，但是抖動(dòng)問題在我這里并沒有得到解決，隨后將key置為固定的數(shù)值就徹底解決了這個(gè)抖動(dòng)的問題，希望可以幫助到大家。文章來源地址http://www.zghlxwxcb.cn/news/detail-740821.html
到了這里，關(guān)于VUE+Element UI項(xiàng)目中使用el-table出現(xiàn)的內(nèi)容塊左右抖動(dòng)問題解決方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
