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

父子组件各自负责，在table中嵌套了子表格后，首次加载表格时，父组件会实例化子组件并传递参数，折叠后再次展开时，只会传递参数，子组件的数据刷新就属于子表格了。再次折叠展开，子表格不会重新刷新数据。除了在子表格上增加按钮强制刷新之外，可以使用watch来自动处理。

1. 扩展a-table，每次展开都记录展开的是哪一行，通过插槽传递出去

 

<template #expandedRowRender="{ record }" v-if="$slots.expandedRowRender"
            ><slot
                name="expandedRowRender"
                :record="record"
                :expandCurrentRow="expandedCurrentRow"
                v-if="$slots.expandedRowRender"
            >
            </slot
        ></template>

 

2. 子组件绑定属性

 

 

<template #expandedRowRender="{ record, expandCurrentRow }">
                <licTimeHis
                    :expandedRow="expandCurrentRow"
                    width="95%"
                    :hideSearch="true"
                    :licCode="record.licCode"
                    :readonly="true"
                />
            </template>

 

3.  子组件内部，监听属性变化，判断是不是自己的父级行被展开了

watch(
        () => props.expandedRow,
        (newVal, oldVal) => {
            if (newVal.expanded && newVal.id == props.searchPara?.routeID) {
                table.value.refresh()
            }
        }
    )