element-assits 0.0.15 → 0.0.16

package/README.md

@@ -57,8 +57,10 @@ Vue 原型上挂载了 `$asyncLoad` 方法
 | innerPagination | 内部 - 分页 | Boolean \| Object | undefined
 | innerOperation | 内部 - 操作栏（尾列）| Boolean \| Object | undefined
 
-> `innerSelection` 可以绑定 `{ data: selectedRows }` 接收选中的行  
-> `innerOperation` 可以绑定 `{ maxNumOfBtn: 3 }` 设置操作栏最大显示的按钮数，超出将被折叠
+> `innerForm` 可以绑定 `{ limit: 'auto', referenceItemWidth: 180, maxItemWidth: 240 }`  
+`limit` 限制默认显示的搜索条件数量，`referenceItemWidth` 单项参考宽度，`maxItemWidth` 单项最大宽度。  
+> `innerSelection` 可以绑定 `{ data: selectedRows }` 接收选中的行。  
+> `innerOperation` 可以绑定 `{ maxNumOfBtn: 3 }` 设置操作栏最大显示的按钮数，超出将被折叠。
 
 ## methods
 

package/lib/index.js

@@ -1559,6 +1559,14 @@ const en = hl.exports, pl = {
     limit: {
       type: [Number, String],
       default: "auto"
+    },
+    referenceItemWidth: {
+      type: Number,
+      default: 180
+    },
+    maxItemWidth: {
+      type: Number,
+      default: 240
     }
   },
   data() {
@@ -1603,11 +1611,11 @@ const en = hl.exports, pl = {
       const t = this.$refs.eform && this.$refs.eform.$el;
       if (!t)
         return;
-      const e = 180, n = this.getWidth(t), r = this.getWidth(this.$refs.sa.$el) + 10, i = this.getWidth(this.$refs.tm.$el), s = Math.floor(n / e), o = Math.floor((n - r) / e), a = Math.floor((n - r - i) / e);
-      this.defaultCount = this.limit === "all" ? this.allColumn.length : typeof this.limit == "number" ? Math.min(this.limit, this.allColumn.length) : a >= 1 ? a : o >= 1 ? o : s;
-      const l = this.showAll ? this.allColumn.length : this.defaultCount, u = l <= a ? (n - r - i) / l - 10 : l <= o ? (n - r) / l - 10 : l < s ? (n - (l - 1) * 10) / l : (n - (s - 1) * 10) / s, f = l > o && l < s ? l : s;
-      this.allColumn.forEach((c, d) => {
-        c.style.width = Math.min(u, 300) + "px", (d + 1) % f === 0 ? c.style.marginRight = 0 : c.style.marginRight = "10px";
+      const e = this.getWidth(t), n = this.getWidth(this.$refs.sa.$el) + 10, r = this.getWidth(this.$refs.tm.$el), i = Math.floor(e / this.referenceItemWidth), s = Math.floor((e - n) / this.referenceItemWidth), o = Math.floor((e - n - r) / this.referenceItemWidth);
+      this.defaultCount = this.limit === "all" ? this.allColumn.length : typeof this.limit == "number" ? Math.min(this.limit, this.allColumn.length) : o >= 1 ? o : s >= 1 ? s : i;
+      const a = this.showAll ? this.allColumn.length : this.defaultCount, l = a <= o ? (e - n - r) / a - 10 : a <= s ? (e - n) / a - 10 : a < i ? (e - (a - 1) * 10) / a : (e - (i - 1) * 10) / i, u = a > s && a < i ? a : i;
+      this.allColumn.forEach((f, c) => {
+        f.style.width = Math.min(l, this.maxItemWidth) + "px", (c + 1) % u === 0 ? f.style.marginRight = 0 : f.style.marginRight = "10px";
       }), this.resetSearchCount();
     },
     getWidth(t) {

package/lib/style.scss

@@ -11,6 +11,35 @@ $--color-border-base: #DCDFE6 !default;
 $--color-border-light: #E4E7ED !default;
 $--color-border-lighter: #EBEEF5 !default;
 $--color-border-extralight: #F2F6FC !default;
+.ea-select {
+  display: inline-block;
+  position: relative;
+  .el-select {
+    width: 100%;
+  }
+  .async-loading.el-icon-loading {
+    position: absolute;
+    top: 10px;
+    right: 28px;
+    color: #999;
+  }
+}
+.ea-select-popover {
+  .el-select-dropdown__item {
+    display: flex;
+    .select-item-value {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .select-item-desc {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #8492a6;
+      margin-left: 8px;
+    }
+  }
+}
+
 // table
 .ea-table {
   // 表格头部样式美化
@@ -128,53 +157,6 @@ $--color-border-extralight: #F2F6FC !default;
   transform: scaleY(0);
 }
 
-.ea-select {
-  display: inline-block;
-  position: relative;
-  .el-select {
-    width: 100%;
-  }
-  .async-loading.el-icon-loading {
-    position: absolute;
-    top: 10px;
-    right: 28px;
-    color: #999;
-  }
-}
-.ea-select-popover {
-  .el-select-dropdown__item {
-    display: flex;
-    .select-item-value {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .select-item-desc {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      color: #8492a6;
-      margin-left: 8px;
-    }
-  }
-}
-
-.el-dialog.ea-modal {
-  &.is-closing {
-    margin: 0 !important;
-  }
-  &.is-fullscreen {
-    border-radius: 0;
-    margin: 0;
-  }
-  .el-dialog__header {
-    color: #555;
-    font-size: 18px;
-    .el-dialog__title {
-      color: inherit;
-      font-size: inherit;
-    }
-  }
-}
-
 .ea-button-tooltip + .ea-button-tooltip {
   margin-left: 10px;
 }
@@ -240,14 +222,6 @@ td {
   }
 }
 
-.ea-list {
-  .loading-text {
-    color: $--color-secondary-text;
-    text-align: center;
-    font-size: inherit;
-  }
-}
-
 .ea-split-container {
   display: flex;
   &.is-down {
@@ -285,6 +259,32 @@ td {
   }
 }
 
+.el-dialog.ea-modal {
+  &.is-closing {
+    margin: 0 !important;
+  }
+  &.is-fullscreen {
+    border-radius: 0;
+    margin: 0;
+  }
+  .el-dialog__header {
+    color: #555;
+    font-size: 18px;
+    .el-dialog__title {
+      color: inherit;
+      font-size: inherit;
+    }
+  }
+}
+
+.ea-list {
+  .loading-text {
+    color: $--color-secondary-text;
+    text-align: center;
+    font-size: inherit;
+  }
+}
+
 .ea-number .el-input__inner {
   text-align: left;
 }
@@ -371,6 +371,30 @@ td {
   }
 }
 
+.ea-form .form-group-title {
+  position: relative;
+  height: 32px;
+  margin-bottom: 22px;
+  > span {
+    position: absolute;
+    top: 0;
+    left: 20%;
+    padding: 5px 25px;
+    background-color: #fff;
+    z-index: 1;
+    color: $--color-secondary-text;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 0;
+    border-bottom: 1px dashed $--color-border-base;
+  }
+}
+
 .ea-table-modal {
   overflow: visible;
   right: unset;
@@ -425,30 +449,6 @@ td {
   }
 }
 
-.ea-form .form-group-title {
-  position: relative;
-  height: 32px;
-  margin-bottom: 22px;
-  > span {
-    position: absolute;
-    top: 0;
-    left: 20%;
-    padding: 5px 25px;
-    background-color: #fff;
-    z-index: 1;
-    color: $--color-secondary-text;
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: 100%;
-    height: 0;
-    border-bottom: 1px dashed $--color-border-base;
-  }
-}
-
 .ea-select-container {
   display: flex;
   justify-content: flex-start;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-assits",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "element-ui 的扩展组件库",
   "main": "lib/index.js",
   "type": "module",