feat(table-img): support simple show mode and more props

改进TableImg组件，支持简单显示模式以及更多可配置的属性。

feat(table-img): support simple show mode and more props
改进TableImg组件，支持简单显示模式以及更多可配置的属性。
无木
1 parent 50f94bfe
Showing 2 changed files with 82 additions and 18 deletions
src/components/Table/src/components/TableImg.vue
src/views/demo/table/CustomerCell.vue
 <template>
   <div
     :class="prefixCls"
-    class="flex mx-auto items-center"
+    class="flex items-center mx-auto"
     v-if="imgList && imgList.length"
     :style="getWrapStyle"
   >
-    <PreviewGroup>
-      <template v-for="img in imgList" :key="img">
-        <Image :width="size" :src="img" />
+    <Badge :count="!showBadge || imgList.length == 1 ? 0 : imgList.length" v-if="simpleShow">
+      <div class="img-div">
+        <PreviewGroup>
+          <template v-for="(img, index) in imgList" :key="img">
+            <Image
+              :width="size"
+              :style="{
+                display: index === 0 ? '' : 'none !important',
+              }"
+              :src="srcPrefix + img"
+            />
+          </template>
+        </PreviewGroup>
+      </div>
+    </Badge>
+    <PreviewGroup v-else>
+      <template v-for="(img, index) in imgList" :key="img">
+        <Image
+          :width="size"
+          :style="{ 'margin-left': index === 0 ? 0 : margin }"
+          :src="srcPrefix + img"
+        />
       </template>
     </PreviewGroup>
   </div>
@@ -17,24 +36,30 @@
   import { defineComponent, computed } from 'vue';
   import { useDesign } from '/@/hooks/web/useDesign';
  
-  import { Image } from 'ant-design-vue';
+  import { Image, Badge } from 'ant-design-vue';
   import { propTypes } from '/@/utils/propTypes';
  
   export default defineComponent({
     name: 'TableImage',
-    components: { Image, PreviewGroup: Image.PreviewGroup },
+    components: { Image, PreviewGroup: Image.PreviewGroup, Badge },
     props: {
       imgList: propTypes.arrayOf(propTypes.string),
       size: propTypes.number.def(40),
+      // 是否简单显示（只显示第一张图片）
+      simpleShow: propTypes.bool,
+      // 简单模式下是否显示图片数量的badge
+      showBadge: propTypes.bool.def(true),
+      // 图片间距
+      margin: propTypes.number.def(4),
+      // src前缀，将会附加在imgList中每一项之前
+      srcPrefix: propTypes.string.def(''),
     },
     setup(props) {
-      const getWrapStyle = computed(
-        (): CSSProperties => {
-          const { size } = props;
-          const s = `${size}px`;
-          return { height: s, width: s };
-        }
-      );
+      const getWrapStyle = computed((): CSSProperties => {
+        const { size } = props;
+        const s = `${size}px`;
+        return { height: s, width: s };
+      });
  
       const { prefixCls } = useDesign('basic-table-img');
       return { prefixCls, getWrapStyle };
@@ -53,5 +78,9 @@
         border-radius: 2px;
       }
     }
+
+    .img-div {
+      display: inline-grid;
+    }
   }
 </style>
@@ -7,9 +7,31 @@
           {{ record.no }}
         </Tag>
       </template>
+      <template #avatar="{ record }">
+        <Avatar
+          :size="60"
+          :src="'http://api.btstu.cn/sjtx/api.php?lx=c1&format=images&id=' + record.id"
+        />
+      </template>
       <template #img>
         <TableImg
-          :imgList="['https://picsum.photos/id/66/346/216', 'https://picsum.photos/id/67/346/216']"
+          :size="60"
+          :simpleShow="true"
+          :imgList="[
+            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1622962250222',
+            'https://picsum.photos/id/66/346/216',
+            'https://picsum.photos/id/67/346/216',
+          ]"
+        />
+      </template>
+      <template #imgs>
+        <TableImg
+          :size="60"
+          :imgList="[
+            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1622962250222',
+            'https://picsum.photos/id/66/346/216',
+            'https://picsum.photos/id/67/346/216',
+          ]"
         />
       </template>
  
@@ -24,7 +46,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicTable, useTable, BasicColumn, TableImg } from '/@/components/Table';
-  import { Tag } from 'ant-design-vue';
+  import { Tag, Avatar } from 'ant-design-vue';
   import { demoListApi } from '/@/api/demo/table';
   const columns: BasicColumn[] = [
     {
@@ -33,6 +55,12 @@
       slots: { customRender: 'id' },
     },
     {
+      title: '头像',
+      dataIndex: 'avatar',
+      width: 100,
+      slots: { customRender: 'avatar' },
+    },
+    {
       title: '分类',
       dataIndex: 'category',
       width: 80,
@@ -46,12 +74,19 @@
       width: 120,
     },
     {
-      title: '头像',
+      title: '图片列表1',
       dataIndex: 'img',
-      width: 120,
+      helpMessage: ['这是简单模式的图片列表', '只会显示一张在表格中', '但点击可预览多张图片'],
+      width: 140,
       slots: { customRender: 'img' },
     },
     {
+      title: '照片列表2',
+      dataIndex: 'imgs',
+      width: 160,
+      slots: { customRender: 'imgs' },
+    },
+    {
       title: '地址',
       dataIndex: 'address',
     },
@@ -70,7 +105,7 @@
     },
   ];
   export default defineComponent({
-    components: { BasicTable, TableImg, Tag },
+    components: { BasicTable, TableImg, Tag, Avatar },
     setup() {
       const [registerTable] = useTable({
         title: '自定义列内容',