轮播视频懒加载

src/views/AppStoresTable.vue

@@ -70,7 +70,8 @@ export default {
           {label: "店长姓名/电话", prop: "shopMangerName", format: v => `${v.shopMangerName}(${v.shopownerPhone})`},
         ]
       },
-
+      curI: 0,
+      curJ: 0
     }
   },
   computed: {
@@ -180,7 +181,7 @@ export default {
           this.$nextTick(() => this.dialog = true)
         }
       })
-    }
+    },
   },
   mounted() {
     this.height = `${this.$el.clientHeight}px`
@@ -190,14 +191,14 @@ export default {
 
 <template>
   <section class="AppStoresTable" @click="dialog=false">
-    <el-carousel indicator-position="none" :height="height" :autoplay="search.changeWay==1">
+    <el-carousel indicator-position="none" :height="height" :autoplay="search.changeWay==1" @change="v=>curI=(v||0)">
       <el-carousel-item v-for="(group,i) in storeList" :key="i">
         <div class="layout">
           <div class="store" v-for="store in group" :key="store.storeCode">
             <div class="headerTitle" v-text="store.storeName" @click="gotoDetail(store)"/>
-            <el-carousel indicator-position="none" height="250px">
+            <el-carousel indicator-position="none" height="250px" @change="v=>curJ=(v||0)">
               <el-carousel-item v-for="(url,j) in store.camera" :key="[i,j].join('_')">
-                <hls-player :url="url"/>
+                <hls-player v-if="`${i}_${j}`==`${curI}_${curJ}`" :url="url"/>
               </el-carousel-item>
             </el-carousel>
             <div class="subTitle" v-text="'品类销售情况'"/>