Select: make clearable work for multi select (#13049)

* Select: make clearable work for multi select (#6399)

* Select: chore

* Select: fix bug and update docs (#13049)

examples/docs/en-US/select.md

@@ -666,7 +666,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | disabled | whether Select is disabled | boolean | — | false |
 | value-key | unique identity key name for value, required when value is an object | string | — | value |
 | size | size of Input | string | large/small/mini | — |
-| clearable | whether single select can be cleared | boolean | — | false |
+| clearable | whether select can be cleared | boolean | — | false |
 | collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
 | multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
 | name | the name attribute of select input | string | — | — |

examples/docs/es/select.md

@@ -673,7 +673,7 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
 | collapse-tags        | si se colapsan los tags a un texto cuando `multiple` es `true`. | boolean  | —                 | false            |
 | value-key            | nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto. | string   | —                 | value            |
 | size                 | tamaño del Input                         | string   | large/small/mini  | —                |
-| clearable            | si el single select puede ser limpiable  | boolean  | —                 | false            |
+| clearable            | whether select can be cleared  | boolean  | —                 | false            |
 | multiple-limit       | maximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`.  Sin límite cuando se fija a 0 | number   | —                 | 0                |
 | name                 | el atributo `name` del input seleccionado | string   | —                 | —                |
 | autocomplete         | el atributo `autocomplete` del input seleccionado | string   | —         | off              |

examples/docs/zh-CN/select.md

@@ -654,14 +654,14 @@
 如果 Select 的绑定值为对象类型，请务必指定 `value-key` 作为它的唯一性标识。
 :::
 
-### Select Attributes 
+### Select Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | multiple | 是否多选 | boolean | — | false |
 | disabled | 是否禁用 | boolean | — | false |
 | value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
 | size | 输入框尺寸 | string | medium/small/mini | — |
-| clearable | 单选时是否可以清空选项 | boolean | — | false |
+| clearable | 是否可以清空选项 | boolean | — | false |
 | collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false |
 | multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
 | name | select input 的 name 属性 | string | — | — |

packages/select/src/select.vue

@@ -186,13 +186,13 @@
       },
 
       showClose() {
+        let hasValue = this.multiple
+          ? this.value.length > 0
+          : this.value !== undefined && this.value !== null && this.value !== '';
         let criteria = this.clearable &&
           !this.selectDisabled &&
           this.inputHovering &&
-          !this.multiple &&
-          this.value !== undefined &&
-          this.value !== null &&
-          this.value !== '';
+          hasValue;
         return criteria;
       },
 
@@ -743,8 +743,9 @@
 
       deleteSelected(event) {
         event.stopPropagation();
-        this.$emit('input', '');
-        this.emitChange('');
+        const value = this.multiple ? [] : '';
+        this.$emit('input', value);
+        this.emitChange(value);
         this.visible = false;
         this.$emit('clear');
       },