iov-design 2.15.56 → 2.15.58

package/lib/iov-design.common.js

@@ -955,6 +955,7 @@ var util_ = __webpack_require__(2);
             'el-select',
             {
               attrs: {
+                fill: true,
                 value: this.$parent.internalPageSize,
                 popperClass: this.$parent.popperClass || '',
                 size: this.$parent.small ? 'mini' : 'small',
@@ -5034,9 +5035,13 @@ var shared_ = __webpack_require__(19);
       var isButton = pendantEl.querySelector('.el-button');
       if (isSelect) {
         Object(dom_["addClass"])(pendantEl, 'is-select');
+      } else {
+        Object(dom_["removeClass"])(pendantEl, 'is-select');
       }
       if (isButton) {
         Object(dom_["addClass"])(pendantEl, 'is-button');
+      } else {
+        Object(dom_["removeClass"])(pendantEl, 'is-button');
       }
     },
     calcIconOffset: function calcIconOffset(place) {
@@ -7624,6 +7629,7 @@ var selectvue_type_template_id_0e4aade6_render = function() {
       ],
       staticClass: "el-select",
       class: [
+        _vm.fill ? "is-fill" : "",
         _vm.selectSize ? "el-select--" + _vm.selectSize : "",
         _vm.selectDisabled ? "is-disabled" : ""
       ],
@@ -7641,6 +7647,7 @@ var selectvue_type_template_id_0e4aade6_render = function() {
             {
               ref: "tags",
               staticClass: "el-select__tags",
+              class: { "is-focus": _vm.visible },
               style: {
                 "max-width": _vm.inputWidth - 32 + "px",
                 width: _vm.inputWidth - _vm.tagsLeft - 32 + "px",
@@ -7664,7 +7671,7 @@ var selectvue_type_template_id_0e4aade6_render = function() {
                                     closable: !_vm.selectDisabled,
                                     size: _vm.collapseTagSize,
                                     hit: item.hitState,
-                                    maxWidth: _vm.multipleTagMaxWidth,
+                                    maxWidth: _vm.maxWidth,
                                     type: "info",
                                     "disable-transitions": ""
                                   },
@@ -7685,10 +7692,13 @@ var selectvue_type_template_id_0e4aade6_render = function() {
                             : _vm._e()
                         ]
                       }),
-                      _vm.selected.length > 1
+                      (_vm.selected.length > 1 &&
+                        _vm.selected.length > _vm.multipleLimitShow) ||
+                      (_vm.selected.length > 0 && _vm.collapseTagsFixed)
                         ? _c(
                             "el-tag",
                             {
+                              ref: "tagsCount",
                               staticClass: "el-select__tags-count",
                               class: {
                                 "el-select__tags-count-fixed":
@@ -7708,7 +7718,12 @@ var selectvue_type_template_id_0e4aade6_render = function() {
                                 [
                                   _vm._v(
                                     _vm._s(_vm.collapseTagsFixed ? "" : "+") +
-                                      _vm._s(_vm.selected.length - 1) +
+                                      _vm._s(
+                                        _vm.collapseTagsFixed
+                                          ? _vm.selected.length
+                                          : _vm.selected.length -
+                                              _vm.multipleLimitShow
+                                      ) +
                                       _vm._s(_vm.collapseTagsSuffix)
                                   )
                                 ]
@@ -7736,7 +7751,7 @@ var selectvue_type_template_id_0e4aade6_render = function() {
                             closable: !item.disabled && !_vm.selectDisabled,
                             size: _vm.collapseTagSize,
                             hit: item.hitState,
-                            maxWidth: _vm.multipleTagMaxWidth,
+                            maxWidth: _vm.maxWidth,
                             type: "info",
                             "disable-transitions": ""
                           },
@@ -8729,6 +8744,8 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
 //
 //
 //
+//
+//
 
 
 
@@ -8772,6 +8789,18 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
 
 
   computed: {
+    // maxWidth() {
+    //   if (this.collapseTags) {
+    //     if (this.multipleTagMaxWidth && this.multipleTagMaxWidth !== 'none') {
+    //       return this.multipleTagMaxWidth;
+    //     }
+    //     const tagsCountWidth = this.$refs.tagsCount && this.$refs.tagsCount.$el.clientWidth || 0;
+    //     const count = this.selected.length <= this.multipleLimitShow ? this.selected.length : this.multipleLimitShow;
+    //     return Math.floor((this.inputWidth - this.tagsLeft - 32 - tagsCountWidth - 20 - count * 16) / count) + 'px';
+    //   } else {
+    //     return this.multipleTagMaxWidth || 'none';
+    //   }
+    // },
     _elFormItemSize: function _elFormItemSize() {
       return (this.elFormItem || {}).elFormItemSize;
     },
@@ -8911,7 +8940,8 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
     popperAppendToBody: {
       type: Boolean,
       default: true
-    }
+    },
+    fill: Boolean
   },
 
   data: function data() {
@@ -8938,7 +8968,8 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
       menuVisibleOnFocus: false,
       isOnComposition: false,
       isSilentBlur: false,
-      tagsLeft: 0
+      tagsLeft: 0,
+      maxWidth: 'none'
     };
   },
 
@@ -8966,6 +8997,7 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
           this.query = '';
           this.handleQueryChange(this.query);
         }
+        this.getMaxWidth();
       }
       this.setSelected();
       if (this.filterable && !this.multiple) {
@@ -9051,19 +9083,35 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
   },
 
   methods: {
+    getMaxWidth: function getMaxWidth() {
+      var _this5 = this;
+
+      this.$nextTick(function () {
+        if (_this5.collapseTags) {
+          if (_this5.multipleTagMaxWidth && _this5.multipleTagMaxWidth !== 'none') {
+            _this5.maxWidth = _this5.multipleTagMaxWidth;
+          }
+          var tagsCountWidth = _this5.$refs.tagsCount && _this5.$refs.tagsCount.$el.clientWidth || 0;
+          var count = _this5.selected.length <= _this5.multipleLimitShow ? _this5.selected.length : _this5.multipleLimitShow;
+          _this5.maxWidth = Math.floor((_this5.inputWidth - _this5.tagsLeft - 32 - tagsCountWidth - 20 - count * 16) / count) + 'px';
+        } else {
+          _this5.maxWidth = _this5.multipleTagMaxWidth || 'none';
+        }
+      });
+    },
     handleNavigate: function handleNavigate(direction) {
       if (this.isOnComposition) return;
 
       this.navigateOptions(direction);
     },
     handleComposition: function handleComposition(event) {
-      var _this5 = this;
+      var _this6 = this;
 
       var text = event.target.value;
       if (event.type === 'compositionend') {
         this.isOnComposition = false;
         this.$nextTick(function (_) {
-          return _this5.handleQueryChange(text);
+          return _this6.handleQueryChange(text);
         });
       } else {
         var lastCharacter = text[text.length - 1] || '';
@@ -9071,7 +9119,7 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
       }
     },
     handleQueryChange: function handleQueryChange(val) {
-      var _this6 = this;
+      var _this7 = this;
 
       if (this.previousQuery === val || this.isOnComposition) return;
       if (this.previousQuery === null && (typeof this.filterMethod === 'function' || typeof this.remoteMethod === 'function')) {
@@ -9080,15 +9128,15 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
       }
       this.previousQuery = val;
       this.$nextTick(function () {
-        if (_this6.visible) _this6.broadcast('ElSelectDropdown', 'updatePopper');
+        if (_this7.visible) _this7.broadcast('ElSelectDropdown', 'updatePopper');
       });
       this.hoverIndex = -1;
       if (this.multiple && this.filterable) {
         this.$nextTick(function () {
-          var length = _this6.$refs.input.value.length * 15 + 20;
-          _this6.inputLength = _this6.collapseTags ? Math.min(50, length) : length;
-          _this6.managePlaceholder();
-          _this6.resetInputHeight();
+          var length = _this7.$refs.input.value.length * 15 + 20;
+          _this7.inputLength = _this7.collapseTags ? Math.min(50, length) : length;
+          _this7.managePlaceholder();
+          _this7.resetInputHeight();
         });
       }
       if (this.remote && typeof this.remoteMethod === 'function') {
@@ -9115,10 +9163,10 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
       this.$refs.scrollbar && this.$refs.scrollbar.handleScroll();
     },
     handleMenuEnter: function handleMenuEnter() {
-      var _this7 = this;
+      var _this8 = this;
 
       this.$nextTick(function () {
-        return _this7.scrollToOption(_this7.selected);
+        return _this8.scrollToOption(_this8.selected);
       });
     },
     emitChange: function emitChange(val) {
@@ -9152,7 +9200,7 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
       return newOption;
     },
     setSelected: function setSelected() {
-      var _this8 = this;
+      var _this9 = this;
 
       if (!this.multiple) {
         var option = this.getOption(this.value);
@@ -9170,12 +9218,12 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
       var result = [];
       if (Array.isArray(this.value)) {
         this.value.forEach(function (value) {
-          result.push(_this8.getOption(value));
+          result.push(_this9.getOption(value));
         });
       }
       this.selected = result;
       this.$nextTick(function () {
-        _this8.resetInputHeight();
+        _this9.resetInputHeight();
       });
     },
     handleFocus: function handleFocus(event) {
@@ -9196,13 +9244,13 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
       this.$refs.reference.blur();
     },
     handleBlur: function handleBlur(event) {
-      var _this9 = this;
+      var _this10 = this;
 
       setTimeout(function () {
-        if (_this9.isSilentBlur) {
-          _this9.isSilentBlur = false;
+        if (_this10.isSilentBlur) {
+          _this10.isSilentBlur = false;
         } else {
-          _this9.$emit('blur', event);
+          _this10.$emit('blur', event);
         }
       }, 50);
       this.softFocus = false;
@@ -9243,15 +9291,15 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
       }
     },
     resetTagsLeft: function resetTagsLeft() {
-      var _this10 = this;
+      var _this11 = this;
 
       this.$nextTick(function () {
-        var prefixLabel = _this10.$el.querySelector('.el-input-group__prefix-label');
-        var prefix = _this10.$el.querySelector('.el-input__prefix');
-        var inputInner = _this10.$el.querySelector('.el-input__inner');
+        var prefixLabel = _this11.$el.querySelector('.el-input-group__prefix-label');
+        var prefix = _this11.$el.querySelector('.el-input__prefix');
+        var inputInner = _this11.$el.querySelector('.el-input__inner');
         var prefixLabelWidth = prefixLabel && Math.round(prefixLabel.getBoundingClientRect().width) || 0;
         var inputPaddingLeft = prefixLabel || prefix ? Math.round(window.getComputedStyle(inputInner).paddingLeft.replace(/px/, '')) : 0;
-        _this10.tagsLeft = prefixLabelWidth + inputPaddingLeft;
+        _this11.tagsLeft = prefixLabel ? prefixLabelWidth + inputPaddingLeft - 4 : 0;
       });
     },
     resetInputState: function resetInputState(e) {
@@ -9260,42 +9308,42 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
       this.resetInputHeight();
     },
     resetInputHeight: function resetInputHeight() {
-      var _this11 = this;
+      var _this12 = this;
 
       if (this.collapseTags && !this.filterable) return;
       this.$nextTick(function () {
-        if (!_this11.$refs.reference) return;
-        var inputInner = _this11.$el.querySelector('.el-input__inner');
-        var groupPrefix = _this11.$el.querySelector('.el-input-group--prefix');
+        if (!_this12.$refs.reference) return;
+        var inputInner = _this12.$el.querySelector('.el-input__inner');
+        var groupPrefix = _this12.$el.querySelector('.el-input-group--prefix');
         var input = groupPrefix || inputInner;
-        var tags = _this11.$refs.tags;
+        var tags = _this12.$refs.tags;
         var tagsHeight = tags ? Math.round(tags.getBoundingClientRect().height) : 0;
-        var sizeInMap = _this11.initialInputHeight || 36;
-        input.style.height = _this11.selected.length === 0 ? sizeInMap + 'px' : Math.max(tags ? tagsHeight + (tagsHeight > sizeInMap ? 6 : 0) : 0, sizeInMap) + 'px';
-        if (_this11.visible && _this11.emptyText !== false) {
-          _this11.broadcast('ElSelectDropdown', 'updatePopper');
+        var sizeInMap = _this12.initialInputHeight || 36;
+        input.style.height = _this12.selected.length === 0 ? sizeInMap + 'px' : Math.max(tags ? tagsHeight + (tagsHeight > sizeInMap ? 6 : 0) : 0, sizeInMap) + 'px';
+        if (_this12.visible && _this12.emptyText !== false) {
+          _this12.broadcast('ElSelectDropdown', 'updatePopper');
         }
       });
     },
     resetHoverIndex: function resetHoverIndex() {
-      var _this12 = this;
+      var _this13 = this;
 
       setTimeout(function () {
-        if (!_this12.multiple) {
-          _this12.hoverIndex = _this12.options.indexOf(_this12.selected);
+        if (!_this13.multiple) {
+          _this13.hoverIndex = _this13.options.indexOf(_this13.selected);
         } else {
-          if (_this12.selected.length > 0) {
-            _this12.hoverIndex = Math.min.apply(null, _this12.selected.map(function (item) {
-              return _this12.options.indexOf(item);
+          if (_this13.selected.length > 0) {
+            _this13.hoverIndex = Math.min.apply(null, _this13.selected.map(function (item) {
+              return _this13.options.indexOf(item);
             }));
           } else {
-            _this12.hoverIndex = -1;
+            _this13.hoverIndex = -1;
           }
         }
       }, 300);
     },
     handleOptionSelect: function handleOptionSelect(option, byClick) {
-      var _this13 = this;
+      var _this14 = this;
 
       if (this.multiple) {
         var value = (this.value || []).slice();
@@ -9322,7 +9370,7 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
       // this.setSoftFocus();
       if (this.visible) return;
       this.$nextTick(function () {
-        _this13.scrollToOption(option);
+        _this14.scrollToOption(option);
       });
     },
     setSoftFocus: function setSoftFocus() {
@@ -9455,7 +9503,7 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
   },
 
   created: function created() {
-    var _this14 = this;
+    var _this15 = this;
 
     this.cachedPlaceHolder = this.currentPlaceholder = this.propPlaceholder;
     if (this.multiple && !Array.isArray(this.value)) {
@@ -9466,18 +9514,18 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
     }
 
     this.debouncedOnInputChange = debounce_default()(this.debounce, function () {
-      _this14.onInputChange();
+      _this15.onInputChange();
     });
 
     this.debouncedQueryChange = debounce_default()(this.debounce, function (e) {
-      _this14.handleQueryChange(e.target.value);
+      _this15.handleQueryChange(e.target.value);
     });
 
     this.$on('handleOptionClick', this.handleOptionSelect);
     this.$on('setSelected', this.setSelected);
   },
   mounted: function mounted() {
-    var _this15 = this;
+    var _this16 = this;
 
     if (this.multiple && Array.isArray(this.value) && this.value.length > 0) {
       this.currentPlaceholder = '';
@@ -9499,7 +9547,7 @@ var scroll_into_view_default = /*#__PURE__*/__webpack_require__.n(scroll_into_vi
     }
     this.$nextTick(function () {
       if (reference && reference.$el) {
-        _this15.inputWidth = reference.$el.getBoundingClientRect().width;
+        _this16.inputWidth = reference.$el.getBoundingClientRect().width;
       }
     });
     this.setSelected();
@@ -12505,7 +12553,7 @@ var table_body_extends = Object.assign || function (target) { for (var i = 1; i
       return cellStyle;
     },
     getCellClass: function getCellClass(rowIndex, columnIndex, row, column) {
-      var classes = [column.id, column.align, column.className];
+      var classes = [column.id, column.align, column.verticalAlign, column.className];
 
       if (this.isColumnHidden(columnIndex)) {
         classes.push('is-hidden');
@@ -15026,6 +15074,7 @@ var columnIdSeed = 1;
     },
     columnKey: String,
     align: String,
+    verticalAlign: String,
     headerAlign: String,
     showTooltipWhenOverflow: Boolean,
     showOverflowTooltip: Boolean,
@@ -15088,6 +15137,9 @@ var columnIdSeed = 1;
     realAlign: function realAlign() {
       return this.align ? 'is-' + this.align : null;
     },
+    realVerticalAlign: function realVerticalAlign() {
+      return this.verticalAlign ? 'is-' + this.verticalAlign : null;
+    },
     realHeaderAlign: function realHeaderAlign() {
       return this.headerAlign ? 'is-' + this.headerAlign : this.realAlign;
     }
@@ -15203,6 +15255,7 @@ var columnIdSeed = 1;
       var aliases = {
         prop: 'property',
         realAlign: 'align',
+        realVerticalAlign: 'verticalAlign',
         realHeaderAlign: 'headerAlign',
         realWidth: 'width'
       };
@@ -15266,6 +15319,7 @@ var columnIdSeed = 1;
       type: type,
       property: this.prop || this.property,
       align: this.realAlign,
+      verticalAlign: this.realVerticalAlign,
       headerAlign: this.realHeaderAlign,
       showOverflowTooltip: this.showOverflowTooltip || this.showTooltipWhenOverflow,
       // filter 相关属性
@@ -34987,32 +35041,169 @@ var cascadervue_type_template_id_032537a6_render = function() {
         ],
         2
       ),
-      _vm.multiple
+      _vm.multiple && _vm.collapseTags && _vm.checkedNodes.length
         ? _c(
-            "div",
-            { staticClass: "el-cascader__tags" },
+            "transition-group",
+            {
+              staticClass: "el-cascader__tags",
+              on: { "after-leave": _vm.updateStyle }
+            },
             [
-              _vm._l(_vm.presentTags, function(tag) {
-                return _c(
-                  "el-tag",
-                  {
-                    key: tag.key,
-                    class: { "is-disabled": !tag.closable && tag.key !== -1 },
+              _vm._l(_vm.presentTags, function(tag, index) {
+                return [
+                  _vm.collapseTags && index <= _vm.multipleLimitShow - 1
+                    ? _c(
+                        "el-tag",
+                        {
+                          key: tag.key,
+                          class: {
+                            "is-disabled": !tag.closable && tag.key !== -1
+                          },
+                          attrs: {
+                            type: "info",
+                            size: _vm.tagSize,
+                            hit: tag.hitState,
+                            maxWidth: _vm.maxWidth,
+                            closable: tag.closable,
+                            "disable-transitions": ""
+                          },
+                          on: {
+                            close: function($event) {
+                              _vm.deleteTag(tag)
+                            }
+                          }
+                        },
+                        [_c("span", [_vm._v(_vm._s(tag.text))])]
+                      )
+                    : _vm._e()
+                ]
+              }),
+              _vm.collapseTags &&
+              ((_vm.checkedNodes.length > 1 &&
+                _vm.checkedNodes.length > _vm.multipleLimitShow) ||
+                (_vm.checkedNodes.length > 0 && _vm.collapseTagsFixed))
+                ? _c(
+                    "el-tag",
+                    {
+                      key: "count",
+                      ref: "tagsCount",
+                      staticClass: "el-cascader__tags-count",
+                      class: {
+                        "el-cascader__tags-count-fixed": _vm.collapseTagsFixed
+                      },
+                      attrs: {
+                        closable: false,
+                        size: _vm.tagSize,
+                        type: "info",
+                        "disable-transitions": ""
+                      }
+                    },
+                    [
+                      _c("span", { staticClass: "el-cascader__tags-text" }, [
+                        _vm._v(
+                          _vm._s(_vm.collapseTagsFixed ? "" : "+") +
+                            _vm._s(
+                              _vm.collapseTagsFixed
+                                ? _vm.checkedNodes.length
+                                : _vm.checkedNodes.length -
+                                    _vm.multipleLimitShow
+                            ) +
+                            _vm._s(_vm.collapseTagsSuffix)
+                        )
+                      ])
+                    ]
+                  )
+                : _vm._e(),
+              _vm.filterable && !_vm.isDisabled
+                ? _c("input", {
+                    directives: [
+                      {
+                        name: "model",
+                        rawName: "v-model.trim",
+                        value: _vm.inputValue,
+                        expression: "inputValue",
+                        modifiers: { trim: true }
+                      }
+                    ],
+                    staticClass: "el-cascader__search-input",
                     attrs: {
-                      type: "info",
-                      size: _vm.tagSize,
-                      hit: tag.hitState,
-                      closable: tag.closable,
-                      "disable-transitions": ""
+                      type: "text",
+                      placeholder: _vm.presentTags.length ? "" : _vm.placeholder
                     },
+                    domProps: { value: _vm.inputValue },
                     on: {
-                      close: function($event) {
-                        _vm.deleteTag(tag)
+                      input: [
+                        function($event) {
+                          if ($event.target.composing) {
+                            return
+                          }
+                          _vm.inputValue = $event.target.value.trim()
+                        },
+                        function(e) {
+                          return _vm.handleInput(_vm.inputValue, e)
+                        }
+                      ],
+                      click: function($event) {
+                        $event.stopPropagation()
+                        _vm.toggleDropDownVisible(true)
+                      },
+                      keydown: function($event) {
+                        if (
+                          !("button" in $event) &&
+                          _vm._k(
+                            $event.keyCode,
+                            "delete",
+                            [8, 46],
+                            $event.key,
+                            ["Backspace", "Delete", "Del"]
+                          )
+                        ) {
+                          return null
+                        }
+                        return _vm.handleDelete($event)
+                      },
+                      blur: function($event) {
+                        _vm.$forceUpdate()
                       }
                     }
-                  },
-                  [_c("span", [_vm._v(_vm._s(tag.text))])]
-                )
+                  })
+                : _vm._e()
+            ],
+            2
+          )
+        : _vm._e(),
+      !_vm.collapseTags
+        ? _c(
+            "transition-group",
+            {
+              staticClass: "el-cascader__tags",
+              on: { "after-leave": _vm.updateStyle }
+            },
+            [
+              _vm._l(_vm.presentTags, function(tag) {
+                return [
+                  _c(
+                    "el-tag",
+                    {
+                      key: tag.key,
+                      class: { "is-disabled": !tag.closable && tag.key !== -1 },
+                      attrs: {
+                        type: "info",
+                        size: _vm.tagSize,
+                        hit: tag.hitState,
+                        maxWidth: _vm.maxWidth,
+                        closable: tag.closable,
+                        "disable-transitions": ""
+                      },
+                      on: {
+                        close: function($event) {
+                          _vm.deleteTag(tag)
+                        }
+                      }
+                    },
+                    [_c("span", [_vm._v(_vm._s(tag.text))])]
+                  )
+                ]
               }),
               _vm.filterable && !_vm.isDisabled
                 ? _c("input", {
@@ -35324,6 +35515,47 @@ var aria_utils_default = /*#__PURE__*/__webpack_require__.n(aria_utils_);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -35434,6 +35666,22 @@ var InputSizeMap = {
       default: true
     },
     collapseTags: Boolean,
+    multipleLimitShow: {
+      type: Number,
+      default: 1
+    },
+    multipleTagMaxWidth: {
+      type: String,
+      default: 'none'
+    },
+    collapseTagsSuffix: {
+      type: String,
+      default: ''
+    },
+    collapseTagsFixed: {
+      type: Boolean,
+      default: false
+    },
     debounce: {
       type: Number,
       default: 300
@@ -35459,7 +35707,10 @@ var InputSizeMap = {
       filtering: false,
       suggestions: [],
       inputInitialHeight: 0,
-      pressDeleteCount: 0
+      pressDeleteCount: 0,
+      inputWidth: 0,
+      tagsLeft: 0,
+      maxWidth: 'none'
     };
   },
 
@@ -35579,6 +35830,8 @@ var InputSizeMap = {
 
     if (input && input.$el) {
       this.inputInitialHeight = Math.max(input.$el.offsetHeight, InputSizeMap[this.realSize]) || 36;
+      this.resetInputWidth();
+      this.resetTagsLeft();
     }
 
     if (!this.isEmptyValue(this.value)) {
@@ -35612,6 +35865,37 @@ var InputSizeMap = {
 
 
   methods: {
+    resetInputWidth: function resetInputWidth() {
+      this.inputWidth = this.$refs.input.$el.getBoundingClientRect().width;
+    },
+    resetTagsLeft: function resetTagsLeft() {
+      var _this2 = this;
+
+      this.$nextTick(function () {
+        var prefixLabel = _this2.$el.querySelector('.el-input-group__prefix-label');
+        var prefix = _this2.$el.querySelector('.el-input__prefix');
+        var inputInner = _this2.$el.querySelector('.el-input__inner');
+        var prefixLabelWidth = prefixLabel && Math.round(prefixLabel.getBoundingClientRect().width) || 0;
+        var inputPaddingLeft = prefixLabel || prefix ? Math.round(window.getComputedStyle(inputInner).paddingLeft.replace(/px/, '')) : 0;
+        _this2.tagsLeft = prefixLabelWidth + inputPaddingLeft;
+      });
+    },
+    getMaxWidth: function getMaxWidth() {
+      var _this3 = this;
+
+      this.$nextTick(function () {
+        if (_this3.collapseTags) {
+          if (_this3.multipleTagMaxWidth && _this3.multipleTagMaxWidth !== 'none') {
+            _this3.maxWidth = _this3.multipleTagMaxWidth;
+          }
+          var tagsCountWidth = _this3.$refs.tagsCount && _this3.$refs.tagsCount.$el.clientWidth || 0;
+          var count = _this3.checkedNodes.length <= _this3.multipleLimitShow ? _this3.checkedNodes.length : _this3.multipleLimitShow;
+          _this3.maxWidth = Math.floor((_this3.inputWidth - _this3.tagsLeft - 32 - tagsCountWidth - 20 - count * 16) / count) + 'px';
+        } else {
+          _this3.maxWidth = _this3.multipleTagMaxWidth || 'none';
+        }
+      });
+    },
     getMigratingConfig: function getMigratingConfig() {
       return {
         props: {
@@ -35625,7 +35909,7 @@ var InputSizeMap = {
       };
     },
     toggleDropDownVisible: function toggleDropDownVisible(visible) {
-      var _this2 = this;
+      var _this4 = this;
 
       if (this.isDisabled) return;
 
@@ -35637,8 +35921,8 @@ var InputSizeMap = {
         this.dropDownVisible = visible;
         if (visible) {
           this.$nextTick(function () {
-            _this2.updatePopper();
-            _this2.panel.scrollIntoView();
+            _this4.updatePopper();
+            _this4.panel.scrollIntoView();
           });
         }
         input.$refs.input.setAttribute('aria-expanded', visible);
@@ -35692,11 +35976,11 @@ var InputSizeMap = {
       this.$emit('active-item-change', value); // Deprecated
     },
     focusFirstNode: function focusFirstNode() {
-      var _this3 = this;
+      var _this5 = this;
 
       this.$nextTick(function () {
-        var filtering = _this3.filtering;
-        var _$refs = _this3.$refs,
+        var filtering = _this5.filtering;
+        var _$refs = _this5.$refs,
             popper = _$refs.popper,
             suggestionPanel = _$refs.suggestionPanel;
 
@@ -35716,15 +36000,15 @@ var InputSizeMap = {
       });
     },
     computePresentContent: function computePresentContent() {
-      var _this4 = this;
+      var _this6 = this;
 
       // nextTick is required, because checked nodes may not change right now
       this.$nextTick(function () {
-        if (_this4.config.multiple) {
-          _this4.computePresentTags();
-          _this4.presentText = _this4.presentTags.length ? ' ' : null;
+        if (_this6.config.multiple) {
+          _this6.computePresentTags();
+          _this6.presentText = _this6.presentTags.length ? ' ' : null;
         } else {
-          _this4.computePresentText();
+          _this6.computePresentText();
         }
       });
     },
@@ -35754,8 +36038,7 @@ var InputSizeMap = {
       var isDisabled = this.isDisabled,
           leafOnly = this.leafOnly,
           showAllLevels = this.showAllLevels,
-          separator = this.separator,
-          collapseTags = this.collapseTags;
+          separator = this.separator;
 
       var checkedNodes = this.getCheckedNodes(leafOnly);
       var tags = [];
@@ -35771,32 +36054,34 @@ var InputSizeMap = {
       };
 
       if (checkedNodes.length) {
-        var first = checkedNodes[0],
-            rest = checkedNodes.slice(1);
-
-        var restCount = rest.length;
-        tags.push(genTag(first));
-
-        if (restCount) {
-          if (collapseTags) {
-            tags.push({
-              key: -1,
-              text: '+' + restCount,
-              closable: false
-            });
-          } else {
-            rest.forEach(function (node) {
-              return tags.push(genTag(node));
-            });
-          }
-        }
+        checkedNodes.forEach(function (node) {
+          return tags.push(genTag(node));
+        });
+        // const [first, ...rest] = checkedNodes;
+        // const restCount = rest.length;
+        // tags.push(genTag(first));
+
+        // console.log(restCount, 'restCount============');
+        // this.restCount = restCount;
+        // if (restCount) {
+        //   if (collapseTags) {
+        //     tags.push({
+        //       key: -1,
+        //       text: `+${restCount}`,
+        //       closable: false
+        //     });
+        //   } else {
+        //     rest.forEach(node => tags.push(genTag(node)));
+        //   }
+        // }
       }
 
       this.checkedNodes = checkedNodes;
       this.presentTags = tags;
+      this.getMaxWidth();
     },
     getSuggestions: function getSuggestions() {
-      var _this5 = this;
+      var _this7 = this;
 
       var filterMethod = this.filterMethod;
 
@@ -35809,8 +36094,8 @@ var InputSizeMap = {
 
       var suggestions = this.panel.getFlattedNodes(this.leafOnly).filter(function (node) {
         if (node.isDisabled) return false;
-        node.text = node.getText(_this5.showAllLevels, _this5.separator) || '';
-        return filterMethod(node, _this5.inputValue);
+        node.text = node.getText(_this7.showAllLevels, _this7.separator) || '';
+        return filterMethod(node, _this7.inputValue);
       });
 
       if (this.multiple) {
@@ -35819,7 +36104,7 @@ var InputSizeMap = {
         });
       } else {
         suggestions.forEach(function (node) {
-          node.checked = Object(util_["isEqual"])(_this5.checkedValue, node.getValueByOption());
+          node.checked = Object(util_["isEqual"])(_this7.checkedValue, node.getValueByOption());
         });
       }
 
@@ -35927,7 +36212,10 @@ var InputSizeMap = {
         } else {
           inputInner.style.height = height;
         }
-        tags.style.left = prefixLabelWidth + inputPaddingLeft + 'px';
+        tags.style.left = prefixLabel ? prefixLabelWidth + inputPaddingLeft - 4 + 'px' : '0px';
+        if (this.checkedNodes.length === 0 && !prefixLabel) {
+          tags.style.left = '12px';
+        }
         if (this.dropDownVisible) {
           this.updatePopper();
         }
@@ -45032,7 +45320,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 /* harmony default export */ var src_0 = __webpack_exports__["default"] = ({
-  version: '2.15.56',
+  version: '2.15.58',
   locale: lib_locale_default.a.use,
   i18n: lib_locale_default.a.i18n,
   install: src_install,