父子組件各自負(fù)責(zé)，在table中嵌套了子表格后，首次加載表格時，父組件會實例化子組件并傳遞參數(shù)，折疊后再次展開時，只會傳遞參數(shù)，子組件的數(shù)據(jù)刷新就屬于子表格了。如
<template #expandedRowRender="{ record }">
<originIndex
style="margin-left: 55px; margin-right: 50px; background-color: aliceblue"
:unsionID="record.unsionID"
/>
</template>
@@#文章來源：http://www.zghlxwxcb.cn/news/detail-707921.html
?
可以提供按鈕，用戶手動刷新子表格數(shù)據(jù)，或者刷新整個頁面，如果希望每次展開都能刷新數(shù)據(jù)，可以使用以下兩種方法：
- 使用v-if 強制子表格再次刷新,在折疊時隱藏，然后在展開時重繪整個表格
#slot
<template #expandedRowRender="{ record }">
<originIndex
style="margin-left: 55px; margin-right: 50px; background-color: aliceblue"
:unsionID="record.unsionID"
v-if="expandedRowVisible"
/>
</template>
# 函數(shù)
//展開處理，只展開一個
const expandedRowKeysRef = ref()
//子表是否顯示
const expandedRowVisible = ref(false)
const onExpand = (expanded, record) => {
expandedRowVisible.value = false
if (expanded) {
expandedRowKeysRef.value = [record.id]
nextTick(() => {
expandedRowVisible.value = true
})
} else {
expandedRowKeysRef.value = []
}
}
?
@@#
- 只刷新數(shù)據(jù)，利用每次展開都會重新傳遞參數(shù)的特點，向子組件傳遞參數(shù)，然后在子組件中根據(jù)參數(shù)來決定是否重新加載數(shù)據(jù)
#slot
<template #expandedRowRender="{ record }">
<originIndex
style="margin-left: 55px; margin-right: 50px; background-color: aliceblue"
:unsionID="record.unsionID"
:expanded="expandedRowVisible"
/>
</template>
#子組件
onUpdated(() => {
if (props.expanded) table.value.refresh()
})
# 函數(shù)
const expandedRowVisible = ref(false)
const onExpand = (expanded, record) => {
expandedRowVisible.value = false
if (expanded) {
expandedRowVisible.value = true
expandedRowKeysRef.value = [record.id]
} else {
expandedRowKeysRef.value = []
}
}
@@#文章來源地址http://www.zghlxwxcb.cn/news/detail-707921.html
到了這里，關(guān)于Ant Design Vue Table 嵌套子表格的數(shù)據(jù)刷新方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
