項目場景：
問題：在進行數(shù)據(jù)統(tǒng)計的過程中使用到了element-ui 的 el-table 組件，出現(xiàn)了合計統(tǒng)計無法渲染情況。
示例場景：在制作統(tǒng)計一欄時需要用到 element-ui 當中的 el-table 表格組件，組件當中有 show-summary 參數(shù)可以實現(xiàn)表格的自動合計，在實際開發(fā)中出現(xiàn)了渲染失敗或不渲染的情況導(dǎo)致無法展示合計一行
問題描述
提示：element ui 在參數(shù)以及方法較多時會出現(xiàn)某些功能渲染失敗。
例如：在 el-table 當中專門添加了 show-summary 參數(shù)以及 :summary-method=“方法名” 方法卻無法及時進行渲染從而導(dǎo)致無法展示表尾合計行
<el-table
:data="xxxxxx"
border
show-summary
:summary-method="方法名"
style="width: 100%">
<el-table-column
prop="xxx"
label="xxx"
width="180">
</el-table-column>
</el-table>
原因分析：
可能原因：組件和參數(shù)使用過多導(dǎo)致渲染出現(xiàn)異步而失效
解決方案：
在 table 當中添加 ref=“table1”
<el-table
:data="xxxxxx"
border
show-summary
:summary-method="方法名"
style="width: 100%"
ref="table1"//重點?。?！
>
<el-table-column
prop="xxx"
label="xxx"
width="180">
</el-table-column>
</el-table>
在 js 代碼區(qū)中添加如下代碼：文章來源：http://www.zghlxwxcb.cn/news/detail-728949.html
export default {
updated () {
this.$nextTick(() => {
this.$refs['table1'].doLayout();
})
},
}
成功解決
文章來源地址http://www.zghlxwxcb.cn/news/detail-728949.html
到了這里，關(guān)于【解決 Element UI 當中 el-table 中使用 show-summary 不顯示合計一行】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
