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

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

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

已采纳

妙码生花

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

1年前

主要有两个点：
第一，给<TableHeader>和<Table>组件设置一个具备响应性的key属性，当key值被修改，表格将自动重新渲染
第二，其实任何时候都可以重新设置baTable的属性，然后改变以上key即可触发表格组件的重渲染，另外，假设column(列配置)被改变了，同时需要重新初始化表格的公共搜索数据，详见以下示例

<template>
    <div class="default-main ba-table-box">
      
        <!-- 表格顶部菜单，设置了:key属性 -->
        <TableHeader
            :key="tableKey"
            :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('cms.content.quick Search Fields') })"
        />

        <!-- 表格，设置了:key属性 -->
        <Table :key="tableKey" />
    </div>
</template>

import { ref, provide, onMounted } from 'vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { getTableConfig } from '/@/api/backend/content'

const tableKey = ref(uuid())

getTableConfig().then(({ data }) => {
    // 表格列数据 - 先来一个selection
    let column: TableColumn[] = [{ type: 'selection', align: 'center', operator: false }]

    // 添加表单默认值
    let defaultItems: anyObj = {
        flag: ['new'],
        target: '_blank',
        currency: 'RMB',
    }

    // 假设：表格列数据是从后端发送来的，在此组装 column
    for (const key in data.fields) {
        let columnData = {
            label: data.fields[key].title,
            prop: data.fields[key].full_name,
            operator: data.fields[key].com_search ? '=' : false,
            sortable: data.fields[key].sort == 1 ? 'custom' : false,
            show: data.fields[key].backend_show == 1 ? true : false,
            align: 'center',
            ...data.fields[key].backend_column_attr,
        }
        column.push(columnData)
    }
    // 最后添加一个操作按钮列
    column.push({ label: t('Operate'), align: 'center', width: 140, render: 'buttons', buttons: defaultOptButtons(['weigh-sort', 'edit', 'delete']), operator: false })

    baTable.table.column = column
    baTable.form.defaultItems = { ...baTable.form.defaultItems, ...defaultItems }
    // 其他 baTable 属性...

    // 关键：修改 tableKey 触发表格组件重新渲染，以及重新初始化公共搜索数据
    tableKey.value = uuid()
    baTable.initComSearch(route.query)
})

// 照常实例化一个 baTable，只是它的 column 是空的，并且没有太多的配置
const baTable: baTableClass = new baTableClass(
    new baTableApi('/admin/content/'),
    {
        pk: 'id',
        column: [],
        dblClickNotEditColumn: [undefined],
        defaultOrder: { prop: 'weigh', order: 'desc' },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
    })
})

赞同(4)