动态表格

layouts/basic.vue

@@ -13,6 +13,7 @@
                         <MenuItem name="3" to="/go/color">
                             <Icon type="ios-analytics"></Icon>
                             色彩
+                            </MenuItem>
                         <MenuItem name="4" to="/go/wall">
                             <Icon type="ios-analytics"></Icon>
                             墙

pages/go/wall/index.vue

@@ -2,13 +2,7 @@
   <div id="wall-test">
     <Split v-model="split">
       <div slot="left" class="henq-wall">
-        <div
-          class="henq-brick"
-          v-for="(li,i) in list"
-          :key="i"
-          v-width="width(li)"
-          v-height="li.rows*40"
-        >
+        <div class="henq-brick" v-for="(li,i) in list" :style="[li.style]">
           <!-- <div class="filed">{{li.name}}</div> -->
           <div class="pkg">
             <div class="title">{{li.name}}</div>
@@ -24,6 +18,8 @@
             slot="span"
             slot-scope="{row,index}"
             v-model="row.span"
+            :min="1"
+            :max="20"
             @on-change="setRow(row,index)"
           />
           <InputNumber
@@ -64,21 +60,63 @@ export default {
         value: i + "大家爱，才是真爱。。。",
         span: 5,
         rows: 1,
-        hide: false
+        hide: false,
+        style: {
+          width: `${5 * 5}%`,
+          height: `${1 * 40}px`,
+          left: `0`,
+          top: `0`
+        }
       });
     }
     this.items = items;
-    this.list = items;
+    // this.list = items;
+    this.resort();
   },
   methods: {
     width(row) {
       return 4.8 * row.span + "%";
     },
+    resort() {
+      let cols = 20;
+      let nextX = 0;
+      let x = 0;
+      let nextY=0;
+      let y = 0;
+      let miny = 0;
+      let w = 5;
+      let h = 30;
+      let items = this.$u.clone(this.items);
+      items.map((u, i) => {
+        if (i == 0) {
+          x = 0;          
+          maxy = 0;
+        } else {
+          if (cols - nextX - u.span > 0) {
+            x += u.span;
+          } else {
+            x = 0;
+            miny += u.rows;
+            maxy += u.rows;
+          }
+        }
+        u.style = {
+          width: `${w * u.span}%`,
+          height: `${u.rows * h}px`,
+          left: `${w * x}%`,
+          top: `${h * y}px`
+        };
+      });
+      this.items = items;
+    },
     setRow(row, i) {
       let item = this.items[i];
       item.rows = row.rows;
       item.span = row.span;
       this.$set(this.items, i, item);
+      this.$nextTick(() => {
+        this.resort();
+      });
     }
   },
   computed: {
@@ -106,16 +144,21 @@ export default {
   .henq-wall {
     width: 100%;
     border: 2px solid @border-color;
-    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    height: 900px;
+    //  justify-content:flex-start;
+    align-items: center;
+    align-content: center;
     .henq-brick {
       border: 1px solid @border-color;
       // border-bottom: 1px solid @border-color;
       display: block;
       line-height: 30px;
-      justify-content:flex-start;
-      align-items:flex-start;
-      float: left;
-      flex-grow: 0;
+      position: absolute;
+      overflow: hidden;
+      // float: left;
+      // flex-grow: 0;
       margin: 2px;
       // align-self: flex-start;
       // margin-top: -1px;
@@ -135,6 +178,11 @@ export default {
         }
       }
     }
+    .henq-brick:hover {
+      background: red;
+      border-block-color: green;
+      z-index: 99;
+    }
     .clear {
       clear: both;
     }