jeecgboot-vue3中BasicTable列表渲染api请求后的值或字典值

需求：
在表格渲染数据的时候需要根据id去后端发送请求，获取到对应的名称

解决办法：
使用插槽的方式，在data.ts中先设置插槽

export const columns: BasicColumn[] = [
  {
    title: '公司',
    dataIndex: 'dockCompany',
    slots: { customRender: 'dockCompany' },
  },
]

list.vue如下设置

<BasicTable @register="registerTable" :rowSelection="rowSelection" :afterFetch="afterFetch">
     <template #dockCompany="{ text, record }">
        <span>{{ dockNameMap[text] }}</span>
     </template>
     <template #status="{ text, record }">
         <span @click="handlePlanClick(record)" style="color: #018ffb; cursor: pointer">
           {{ planStatusText[text] }}
         </span>
     </template>
</BasicTable>
import { render } from '/@/utils/common/renderUtils';

const dockNameMap = ref<Record<string, string>>({});
const planStatusText = ref<Record<string, string>>({});
const afterFetch = async (records) => {
  let resDockCompanyList = [{
    orgCode: '',
    departName: ' '
  }];
  await getDockCompanyAll({}).then(res => {
    resDockCompanyList = res;
  })
  // 遍历数组中的每个记录
  records.forEach(record => {
    const dockCompany = record.dockCompany as string | undefined;
    const status = record.status as string | undefined;
    if (dockCompany) {
      resDockCompanyList.forEach(item => {
        if (item.orgCode === dockCompany) {
          dockNameMap.value[dockCompany] = item?.departName || ' ';
        }
      })
    }
    if (status) {
      planStatusText.value[status] = render.renderDict(status, 'status').children;
    }
  });
  return records;
}