doc: uppate table

components/table/demo/basic.vue

@@ -17,19 +17,26 @@ Simple table with actions.
 
 <template>
   <a-table :columns="columns" :data-source="data">
-    <template #name="{ text }">
-      <a>{{ text }}</a>
-    </template>
-    <template #customTitle>
+    <template #headerCell="{ title, column }">
+      <template v-if="column.key === 'name'">
         <span>
           <smile-outlined />
           Name
         </span>
       </template>
-    <template #tags="{ text: tags }">
+      <template v-else>{{ title }}</template>
+    </template>
+
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'name'">
+        <a>
+          {{ record.name }}
+        </a>
+      </template>
+      <template v-else-if="column.key === 'tags'">
         <span>
           <a-tag
-          v-for="tag in tags"
+            v-for="tag in record.tags"
             :key="tag"
             :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
           >
@@ -37,7 +44,7 @@ Simple table with actions.
           </a-tag>
         </span>
       </template>
-    <template #action="{ record }">
+      <template v-else-if="column.key === 'action'">
         <span>
           <a>Invite 一 {{ record.name }}</a>
           <a-divider type="vertical" />
@@ -49,6 +56,8 @@ Simple table with actions.
           </a>
         </span>
       </template>
+      <template v-else>{{ record.name }}</template>
+    </template>
   </a-table>
 </template>
 <script lang="ts">
@@ -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' },
   },
 ];