How to fix the problem "Slot "default" invoked outside of the render function"? Vue3, Setup, Antd-vue

Question

I am getting the following error message:

Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead. 

The warning only occurs when I use a-table components in my code.

I customized a component named 'Menu' like this:

<template>
  <div class="menu-layout">
    <!-- logo/title -->
    <router-link to="/home" class="menu-logo">
      <img src="@/assets/img/logo.png" />
      <b style="font-size: 18px; margin-right: 8px">{{ props.title!.en }}</b
      ><span>{{ props.title!.cn }}</span>
    </router-link>
    <!-- menu -->
    <div class="menu-content">
      <slot name="menu" :menuStyle="menuStyle"></slot>
    </div>
    <!-- tool/user -->
    <div class="menu-option">
      <div class="menu-timeShow">{{ current_time }}</div>
      <slot name="option" :iconClass="iconClass"></slot>
      <div class="menu-icon">
        <a-dropdown>
          <a-space>
            <div class="menu-userIcon">
              {{ props.username?.charAt(0).toUpperCase() }}
            </div>
            <div class="menu-userText">{{ props.username }}</div>
          </a-space>
        </a-dropdown>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, type PropType, onMounted } from 'vue';
import type { Title } from './menu';

import { date2String } from '@/utils';
// props
const props = defineProps({
  title: Object as PropType<Title>,
  username: String,
});

// propetries
const current_time = ref('');
const iconClass = ref('menu-icon');
const menuStyle = ref({ lineHeight: '48px' });

onMounted(() => {
  setInterval(() => {
    current_time.value = date2String('YYYY-mm-dd HH:MM:SS', new Date()); // 更新当前时间
  }, 1000);
});
</script>
<style lang="less"></style>

And I use Mune cpn in Home.vue like this:

<template>
  <a-layout>
    <a-layout-header>
      <Menu :title="{ en: 'TEST', cn: '测试' }" :username="username">
        <template #menu="{ menuStyle }">
          <a-menu
            theme="dark"
            mode="horizontal"
            :style="menuStyle"
            :selectedKeys="selectedKeys"
          >
            <a-menu-item key="dashboard">
              <router-link :to="{ name: 'dashboard' }">仪表盘</router-link>
            </a-menu-item>
          </a-menu>
        </template>
        <template #option="{ iconClass }">
          <InfoCircleOutlined :class="iconClass" />
          <SettingOutlined :class="iconClass" />
        </template>
      </Menu>
    </a-layout-header>
    <div>
      <router-view v-slot="{ Component }">
        <template v-if="Component">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </template>
      </router-view>
    </div>
  </a-layout>
</template>

Finally, I use a-table cpn in the dashboard.vue, If I do not use a-table, the page will display normally without warning, but when I use a-table, it will always warn: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.

<template>
  <div>
    <a-breadcrumb>
      <a-breadcrumb-item>仪表盘</a-breadcrumb-item>
    </a-breadcrumb>

    <a-space direction="vertical" :size="20" style="width: 100%">
      <a-row :gutter="20">
        <a-col :span="12">
          <a-table :columns="table.columns" :data-source="table.data" />
        </a-col>
        <a-col :span="12">
          <a-card title="面积图">
            <line-chart v-bind="{ ...line }" />
          </a-card>
        </a-col>
      </a-row>
    </a-space>
  </div>
</template>

What's wrong with my code and how can I do to get rid of this warning?

According to the description of the problem itself, it is necessary to put the slot function into the rendering function. I don't know much about the logic of , does itself not do corresponding processing? Is it necessary to manually write the slot function in the rendering function to be effective? Is there a way to resolve this warning using just ?

Answer 1

I've solved my problem.I've solved my problem.The problem appeared in the use of a-table. The columns and data I passed to a-table were ref objects, so a-table could not get the values of columns and data normally, which led to errors. I found this problem only when I put the code using a-table on Home.vue. The problem is solved when I modify the values passed to columns and data:

// table.ts
const columns = ref([])
const data = ref([])
const table = { columns: cloumns.value, data: data.value }
export default table

// demo.vue
<a-table
  :columns="table.columns"
  :data-source="table.data"
  :row-key="(e: DataProps) => e.id"
></a-table>