修改轮播

src/views/AppStoresTable.vue

@@ -4,6 +4,7 @@ export default {
   label: "多店监控",
   data() {
     return {
+      height: '600px',
       stores: [
         {}, {}, {}, {}, {}
       ],
@@ -26,28 +27,54 @@ 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">
-    <div class="layout">
+    <el-carousel indicator-position="none" :height="height">
-      <div class="store" v-for="store in stores" :key="store.id">
+      <el-carousel-item v-for="(group,i) in storeList" :key="i">
-        <div class="header" v-text="'郑州朗程康桥店'"/>
+        <div class="layout">
-        <el-carousel indicator-position="none" height="250px">
+          <div class="store" v-for="store in group" :key="store.id">
-          <el-carousel-item></el-carousel-item>
+            <div class="header" v-text="'郑州朗程康桥店'"/>
-        </el-carousel>
+            <el-carousel indicator-position="none" height="250px">
-        <div class="title" v-text="'品类销售情况'"/>
+              <el-carousel-item></el-carousel-item>
-        <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
+            </el-carousel>
-          <el-table-column v-for="column in columns.品类销售情况" v-bind="column" :key="column.prop"/>
+            <div class="title" v-text="'品类销售情况'"/>
-        </el-table>
+            <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
-        <div class="title" v-text="'重点单品情况'"/>
+              <el-table-column v-for="column in columns.品类销售情况" v-bind="column" :key="column.prop"/>
-        <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
+            </el-table>
-          <el-table-column v-for="column in columns.重点单品情况" v-bind="column" :key="column.prop"/>
+            <div class="title" v-text="'重点单品情况'"/>
-        </el-table>
+            <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
-      </div>
+              <el-table-column v-for="column in columns.重点单品情况" v-bind="column" :key="column.prop"/>
-    </div>
+            </el-table>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+
   </section>
 </template>