fix Select bug that multiple options disalbed

view-design · Jul 3, 2020 · b15d945 · b15d945
1 parent df671ae
commit b15d945
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/src/components/select/select-head.vue b/src/components/select/select-head.vue
@@ -9,8 +9,8 @@
             class="ivu-tag ivu-tag-checked"
             v-for="(item, index) in selectedMultiple"
             v-if="maxTagCount === undefined || index < maxTagCount">
-            <span class="ivu-tag-text">{{ item.tag !== undefined ? item.tag : item.label }}</span>
-            <Icon type="ios-close" @click.native.stop="removeTag(item)"></Icon>
+            <span class="ivu-tag-text" :class="{ 'ivu-select-multiple-tag-hidden': item.disabled }">{{ item.tag !== undefined ? item.tag : item.label }}</span>
+            <Icon type="ios-close" v-if="!item.disabled" @click.native.stop="removeTag(item)"></Icon>
         </div><div class="ivu-tag ivu-tag-checked" v-if="maxTagCount !== undefined && selectedMultiple.length > maxTagCount">
             <span class="ivu-tag-text ivu-select-max-tag">
                 <template v-if="maxTagPlaceholder">{{ maxTagPlaceholder(selectedMultiple.length - maxTagCount) }}</template>

diff --git a/src/components/select/select.vue b/src/components/select/select.vue
@@ -490,9 +490,12 @@
                 const option = this.flatOptions.find(({componentOptions}) => componentOptions.propsData.value === value);
                 if (!option) return null;
                 const label = getOptionLabel(option);
+                // 修复多选时，选项有disabled属性，选中项仍然能删除的 bug
+                const disabled = option.componentOptions.propsData.disabled;
                 return {
                     value: value,
                     label: label,
+                    disabled: disabled
                 };
             },
             getInitialValue(){

diff --git a/src/styles/components/select.less b/src/styles/components/select.less
@@ -229,6 +229,9 @@
             top: 4px;
         }
     }
+    &-multiple-tag-hidden{
+        margin-right: 0 !important;
+    }
 
     &-large&-multiple .@{css-prefix}tag{
         height: 32px;
@@ -319,6 +322,15 @@
         top: 2px;
         right: 8px;
     }
+    &-selected.ivu-select-item-disabled{
+        color: @btn-disable-color;
+        &:after{
+            color: @btn-disable-color;
+        }
+        &:hover{
+            background-color: #fff;
+        }
+    }
 }
 
 .@{select-group-prefix-cls} {