修改轮播

src/views/AppStoresTable.vue

@@ -4,6 +4,7 @@ export default {
   label: "多店监控",
   data() {
     return {
+      height: '600px',
       stores: [
         {}, {}, {}, {}, {}
       ],
@@ -26,14 +27,37 @@ export default {
         ]
       },
     }
+  },
+  computed: {
+    storeList: v => {
+      const list = []
+      let group = []
+      v.stores.map((e, i) => {
+        if (group.length < 4) {
+          group.push(e)
+          if (i + 1 == v.stores.length) {
+            list.push(group)
+          }
+        } else {
+          list.push(group)
+          group = [e]
+        }
+      })
+      return list
+    }
+  },
+  mounted() {
+    this.height = `${this.$el.clientHeight}px`
   }
 }
 </script>
 
 <template>
   <section class="AppStoresTable">
+    <el-carousel indicator-position="none" :height="height">
+      <el-carousel-item v-for="(group,i) in storeList" :key="i">
         <div class="layout">
-      <div class="store" v-for="store in stores" :key="store.id">
+          <div class="store" v-for="store in group" :key="store.id">
             <div class="header" v-text="'郑州朗程康桥店'"/>
             <el-carousel indicator-position="none" height="250px">
               <el-carousel-item></el-carousel-item>
@@ -48,6 +72,9 @@ export default {
             </el-table>
           </div>
         </div>
+      </el-carousel-item>
+    </el-carousel>
+
   </section>
 </template>