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

有时，我们需要先发送一个网络请求，然后根据网络请求的返回值，来确定表格有那些列，列如何渲染，表格有那些操作按钮，甚至默认值是什么等等...

// 假设 getTableConfig 是写好的表格配置数据请求函数
import { getTableConfig } from '/@/api/backend/content'

已采纳

妙码生花

这家伙很懒，什么也没写~

1年前

在之前，我们已经分享了一个方案一，本方案二实现更加简单，它使用了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>标签中即可，一共两步

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

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

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