Ant Design Vue Table 嵌套子表格的數據刷新方法

父子組件各自負責，在table中嵌套了子表格後，首次加載表格時，父組件會實例化子組件並傳遞參數，摺疊後再次展開時，只會傳遞參數，子組件的數據刷新就屬於子表格了。如

@@@code

<template #expandedRowRender="{ record }">

<originIndex

style="margin-left: 55px; margin-right: 50px; background-color: aliceblue"

:unsionID="record.unsionID"

/>

</template>

@@#

 

可以提供按鈕，用戶手動刷新子表格數據，或者刷新整個頁面，如果希望每次展開都能刷新數據，可以使用以下兩種方法：

1. 使用v-if 強制子表格再次刷新,在摺疊時隱藏，然後在展開時重繪整個表格

@@@code

#slot
					

<template #expandedRowRender="{ record }">
						

                      <originIndex

                          style="margin-left: 55px; margin-right: 50px; background-color: aliceblue"
						

                          :unsionID="record.unsionID"
						

                          v-if="expandedRowVisible"
								

                      />

                  </template>

# 函數
					

//展開處理，只展開一個
						

  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 = []

      }

  }

 

@@#

1. 只刷新數據，利用每次展開都會重新傳遞參數的特點，向子組件傳遞參數，然後在子組件中根據參數來決定是否重新加載數據

@@@code

#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()

  })

# 函數
					

const expandedRowVisible = ref(false)

  const onExpand = (expanded, record) => {

      expandedRowVisible.value = false
						

					if (expanded) {

          expandedRowVisible.value = true
						

          expandedRowKeysRef.value = [record.id]

      } else {

          expandedRowKeysRef.value = []

      }

  }

@@#