3A头条

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

2023-09-12 12:01 由 秦秋随 发表于 #前端开发

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


      }


  }

@@#

热门相关：总裁的秘密爱人   悠哉兽世：种种田，生生崽   悠哉兽世：种种田，生生崽   网游三国之城市攻略   名门盛婚：首席，别来无恙！