Ant Design Vue Table 嵌套子表格的数据刷新方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了Ant Design Vue Table 嵌套子表格的数据刷新方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

父子组件各自负责，在table中嵌套了子表格后，首次加载表格时，父组件会实例化子组件并传递参数，折叠后再次展开时，只会传递参数，子组件的数据刷新就属于子表格了。如

@@@code

<originIndex

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

:unsionID="record.unsionID"

</template>

@@#

可以提供按钮，用户手动刷新子表格数据，或者刷新整个页面，如果希望每次展开都能刷新数据，可以使用以下两种方法：

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

@@#

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

@@#文章来源地址https://www.toymoban.com/news/detail-707921.html

到了这里，关于Ant Design Vue Table 嵌套子表格的数据刷新方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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