Browse Source

feat(function): add table bodyCell slot for antdv3.x; and fix #1705 (#1991)

GauharChan 2 years ago
parent
commit
2c536976e8
2 changed files with 23 additions and 17 deletions
  1. 4 0
      src/components/Table/src/BasicTable.vue
  2. 19 17
      src/views/demo/table/CustomerCell.vue

+ 4 - 0
src/components/Table/src/BasicTable.vue

@@ -28,6 +28,10 @@
       <template #headerCell="{ column }">
         <HeaderCell :column="column" />
       </template>
+      <!-- 增加对antdv3.x兼容 -->
+      <template #bodyCell="data">
+        <slot name="bodyCell" v-bind="data || {}"></slot>
+      </template>
       <!--      <template #[`header-${column.dataIndex}`] v-for="(column, index) in columns" :key="index">-->
       <!--        <HeaderCell :column="column" />-->
       <!--      </template>-->

+ 19 - 17
src/views/demo/table/CustomerCell.vue

@@ -1,24 +1,26 @@
 <template>
   <div class="p-4">
     <BasicTable @register="registerTable">
-      <template #id="{ record }"> ID: {{ record.id }} </template>
-      <template #no="{ record }">
-        <Tag color="green">
-          {{ record.no }}
-        </Tag>
-      </template>
-      <template #avatar="{ record }">
-        <Avatar :size="60" :src="record.avatar" />
-      </template>
-      <template #img="{ text }">
-        <TableImg :size="60" :simpleShow="true" :imgList="text" />
-      </template>
-      <template #imgs="{ text }"> <TableImg :size="60" :imgList="text" /> </template>
+      <template #bodyCell="{ column, record, text }">
+        <template v-if="column.key === 'id'"> ID: {{ record.id }} </template>
+        <template v-if="column.key === 'no'">
+          <Tag color="green">
+            {{ record.no }}
+          </Tag>
+        </template>
+        <template v-if="column.key === 'avatar'">
+          <Avatar :size="60" :src="record.avatar" />
+        </template>
+        <template v-if="column.key === 'imgArr'">
+          <TableImg :size="60" :simpleShow="true" :imgList="text" />
+        </template>
+        <template v-if="column.key === 'imgs'"> <TableImg :size="60" :imgList="text" /> </template>
 
-      <template #category="{ record }">
-        <Tag color="green">
-          {{ record.no }}
-        </Tag>
+        <template v-if="column.key === 'category'">
+          <Tag color="green">
+            {{ record.no }}
+          </Tag>
+        </template>
       </template>
     </BasicTable>
   </div>