perf: 优化应用数据列表对媒体数据展示

base-manager-ui/admin/src/pages/basicset/appmarket/components/DataUpdate.vue

@@ -69,22 +69,28 @@
 
         <!-- 图片 -->
         <template slot="img" slot-scope="text">
-          <img
-            v-if="text.img"
-            class="pre-item"
-            :src="filterRes(text.img)"
-            @click="handlePreview('img', text.img)"
-          />
+          <a-space v-if="text.img">
+            <img
+              class="pre-item"
+              v-for="(v, i) in filterRes(text.img)"
+              :key="i"
+              :src="v"
+              @click="handlePreview('img', v)"
+            />
+          </a-space>
           <span v-else>--</span>
         </template>
         <!-- 视频 -->
         <template slot="video" slot-scope="text">
-          <video
-            v-if="text.video"
-            width="50"
-            :src="filterRes(text.video)"
-            @click="handlePreview('video', text.video)"
-          />
+          <a-space v-if="text.video">
+            <video
+              v-for="(v, i) in filterRes(text.video)"
+              :key="i"
+              width="50"
+              :src="v"
+              @click="handlePreview('video', v)"
+            />
+          </a-space>
           <span v-else>--</span>
         </template>
         <!-- 操作 -->
@@ -347,25 +353,19 @@ export default {
     },
     // 过滤影音
     filterRes(data) {
-      let resource = data.split(",").map((v) => {
-        return v;
-      });
-
-      return resource[0];
+      let resource = data.split(",");
+      return resource;
     },
     // 预览
-    handlePreview(type, data) {
-      let resource = data.split(",").map((v) => {
-        return v;
-      });
+    handlePreview(type, url) {
       if (type == "img") {
         this.$viewerApi({
-          images: resource,
+          images: [url],
         });
       } else {
         this.previewData = {
           type,
-          url: resource[0],
+          url,
         };
         this.previewVisible = true;
       }