diff --git a/components/table/demo/basic.vue b/components/table/demo/basic.vue
index 2d0e06ee4..61c07f278 100644
--- a/components/table/demo/basic.vue
+++ b/components/table/demo/basic.vue
@@ -17,37 +17,46 @@ Simple table with actions.
 
 <template>
   <a-table :columns="columns" :data-source="data">
-    <template #name="{ text }">
-      <a>{{ text }}</a>
+    <template #headerCell="{ title, column }">
+      <template v-if="column.key === 'name'">
+        <span>
+          <smile-outlined />
+          Name
+        </span>
+      </template>
+      <template v-else>{{ title }}</template>
     </template>
-    <template #customTitle>
-      <span>
-        <smile-outlined />
-        Name
-      </span>
-    </template>
-    <template #tags="{ text: tags }">
-      <span>
-        <a-tag
-          v-for="tag in tags"
-          :key="tag"
-          :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
-        >
-          {{ tag.toUpperCase() }}
-        </a-tag>
-      </span>
-    </template>
-    <template #action="{ record }">
-      <span>
-        <a>Invite 一 {{ record.name }}</a>
-        <a-divider type="vertical" />
-        <a>Delete</a>
-        <a-divider type="vertical" />
-        <a class="ant-dropdown-link">
-          More actions
-          <down-outlined />
+
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'name'">
+        <a>
+          {{ record.name }}
         </a>
-      </span>
+      </template>
+      <template v-else-if="column.key === 'tags'">
+        <span>
+          <a-tag
+            v-for="tag in record.tags"
+            :key="tag"
+            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
+          >
+            {{ tag.toUpperCase() }}
+          </a-tag>
+        </span>
+      </template>
+      <template v-else-if="column.key === 'action'">
+        <span>
+          <a>Invite 一 {{ record.name }}</a>
+          <a-divider type="vertical" />
+          <a>Delete</a>
+          <a-divider type="vertical" />
+          <a class="ant-dropdown-link">
+            More actions
+            <down-outlined />
+          </a>
+        </span>
+      </template>
+      <template v-else>{{ record.name }}</template>
     </template>
   </a-table>
 </template>
@@ -56,9 +65,9 @@ import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
 import { defineComponent } from 'vue';
 const columns = [
   {
+    name: 'Name',
     dataIndex: 'name',
     key: 'name',
-    slots: { title: 'customTitle', customRender: 'name' },
   },
   {
     title: 'Age',
@@ -74,12 +83,10 @@ const columns = [
     title: 'Tags',
     key: 'tags',
     dataIndex: 'tags',
-    slots: { customRender: 'tags' },
   },
   {
     title: 'Action',
     key: 'action',
-    slots: { customRender: 'action' },
   },
 ];