一个请求响应后，再初始化表格数据/实例化表格（方案二）

在之前，我们已经分享了一个方案一，本方案二实现更加简单，它使用了vue3的实验性功能Suspense，是一种非常简单和易于理解的方式

此方案可以得到的效果

// 直接 await(等待) 接口响应，得到接口响应的 data
const { code, data } = await getTableConfig()

// 此时可以直接使用获取到的 data 组装表格数据
const baTable = new baTableClass(
    new baTableApi('/admin/test.test/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            {
                label: '名称',
                prop: 'name',
                align: 'center',
                render: 'tag',
                operator: 'eq',
                sortable: false,
                // replaceValue: { name1: '名称1', name2: '名称2' },
                // 直接使用从接口加载到的 data.content
                replaceValue: data.content,
            },
        ],
        // 顺便赋值到 extend，方便其他地方使用，比如表单中
        extend: {
            names: data.content,
        },
    },
    {
        // 顺便给添加表单来个默认值
        defaultItems: {name: Object.keys(data.content)[0]}
    }
)

具体实现

实现以上面的方法来写代码，只需要将整个index.vue组件包裹在<Suspense>标签中即可，一共两步

1. 在index.vue同级目录中，新建indexSuspense.vue文件，其中内容如下：

<template>
    <div>
        <Suspense>
            <index />
        </Suspense>
    </div>
</template>

cleanXss
import index from './index.vue'
cleanXss

2. 打开后台菜单规则管理，找到当前菜单，将组件路径由index.vue修改为我们刚刚新建的indexSuspense.vue即可

反过来，以上只是拿表格举例<Suspense>的使用，它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。非常好用！