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

 } 

 } 

@@#

改进的方法，使用Watch来监视变化 并决定是否主动更新

@@@code

# 在父组件中处理折叠事件

const expandTime = ref(0)

    const expandedRowRender = (expanded, record) => {

        if (expanded) {

            expandedRowKeysRef.value = [record.id]

             refreshAllData()

        } else {

            expandedRowKeysRef.value = []

        }

        //强制使关联的子表刷新

}

 

const refreshAllData = () => {

        // 所有绑定了的子表格都会主动刷新

        expandTime.value = 0

        nextTick(() => (expandTime.value = 1))

    }

 

 

# 在子组件中

watch(

        () => props.expandTime,

        (newValue, oldValue) => {

            if (newValue != oldValue && newValue == 1 && table.value) table.value.refresh()

        }

    )

 

@@#