jeecgBoot-vue3主子表

<!--引用表格-->
<BasicTable @register="registerTable" style="background-color: #fff;" @expand="handleExpand">
    <template #htmlSlot="{ text }">
        <div v-html="text"></div>
    </template>
    <template #bodyCell="{ column, record }">
        //主表中内容
         ......
    </template>
    <!-- 子表 -->
    <template #expandedRowRender>
        <BasicTable @register="registerInnerTable"
                    style="background-color:#F7F7F7;padding: 0;">
            <template #bodyCell="{ column, record }">
                //子表内容
                 ......
            </template>
        </BasicTable>
    </template>
</BasicTable>

注册表格数据

//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
        // title: 'userInformation',
        api: list,
        rowKey: 'tradeOrderNo',
        columns,
        canResize: false,
        ellipsis: true,
        useSearchForm: false,
        formConfig: {
           ......
        },
        .....
    },
    .....
});
// 子表
const { tableContext: transactionTable } = useListPage({
    tableProps: {
        title: '',
        dataSource:dataInner,
        columns: innerColumns,
        canResize: false,
        useSearchForm: false,
        ....
    },
    exportConfig: {
        name: 'merchant',
        url: getExportUrl,
    },
    importConfig: {
        url: getImportUrl,
       success: handleSuccess,
    },
});
const [registerTable, { reload, getForm }, { rowSelection, selectedRowKeys }] = tableContext;
const [registerInnerTable] = transactionTable;

// 展开key
const expandedRowKeys = ref<any[]>([]);
// 子表数据
const innerData = ref<any[]>([]);

动态获取子表数据

/**
 * 展开事件  获取子表格数据
 * */
function handleExpand(expanded, record) {
    console.log(expanded, record, 'expanded');//是否展开，record为主表得rowKey--
    //输出即为 {tradeOrderNo：1233}
    expandedRowKeys.value = [];
    innerData.value = [];
    if (expanded === true) {
        expandedRowKeys.value.push(record.tradeOrderNo); 
        //可发送请求获取子表数据
         ......
    }
}