Ant Design Vue Table 嵌套子表格的数据刷新方法

  • Ant Design Vue Table 嵌套子表格的数据刷新方法已关闭评论
  • 90 次浏览
  • A+
所属分类:Web前端
摘要

父子组件各自负责,在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 = [] 

      } 

  } 

@@#