一个请求响应后,再初始化表格数据(方案一)
表格

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

// 假设 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()
    })
})
1个回答默认排序 投票数排序
Bluely
Bluely
这家伙很懒,什么也没写~
9月前

感谢妙码生花分享的方案😄

请先登录
2
2
8
2