机构选择框新增清除功能

src/components/base/OrgSelect.vue

@@ -4,15 +4,20 @@
     @click="switchOpen"
   >
     <div v-if="multiple" class="el-select__tags">
-      <el-tag v-for="item in selectedList" :key="item.id">{{
-        item.name
-      }}</el-tag>
+      <el-tag
+        v-for="item in selectedList"
+        :key="item.id"
+        @close="deleteTag($event, item)"
+        >{{ item.name }}</el-tag
+      >
     </div>
     <div
       :class="[
         'el-input el-input--small el-input--suffix',
         { 'is-focus': isFocus }
       ]"
+      @mouseenter="inputHovering = true"
+      @mouseleave="inputHovering = false"
     >
       <input
         ref="inputRef"
@@ -26,6 +31,7 @@
       <span class="el-input__suffix">
         <span class="el-input__suffix-inner">
           <i
+            v-show="!showClose"
             :class="[
               'el-select__caret',
               'el-input__icon',
@@ -33,6 +39,11 @@
               { 'is-reverse': visible }
             ]"
           ></i>
+          <i
+            v-if="showClose"
+            class="el-select__caret el-input__icon el-icon-circle-close"
+            @click="handleClearClick"
+          ></i>
         </span>
       </span>
     </div>
@@ -88,6 +99,10 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
     }
   },
   directives: { Clickoutside },
@@ -98,12 +113,22 @@ export default {
       selectedOrgIds: [],
       visible: false,
       isFocus: false,
+      inputHovering: false,
       orgs: [],
       defaultProps: {
         label: "name"
       }
     };
   },
+  computed: {
+    showClose() {
+      let hasValue = this.multiple
+        ? Array.isArray(this.value) && this.value.length > 0
+        : this.value !== undefined && this.value !== null && this.value !== "";
+      let criteria = this.clearable && this.inputHovering && hasValue;
+      return criteria;
+    }
+  },
   watch: {
     value(val, oldval) {
       if (val !== oldval) this.initSelected(val);
@@ -210,6 +235,24 @@ export default {
     checkSelected(data) {
       return this.selectedOrgIds.includes(data.id);
     },
+    deleteTag(event, data) {
+      if (this.selectedOrgIds.includes(data.id)) {
+        this.selectedOrgList = this.selectedOrgList.filter(
+          item => item.id !== data.id
+        );
+        this.updateSelectOrgIds();
+        this.emitChange();
+      }
+      event.stopPropagation();
+    },
+    handleClearClick(event) {
+      event.stopPropagation();
+      this.selectedOrgList = [];
+      this.selectedOrg = {};
+      this.updateSelectOrgIds();
+      this.emitChange();
+      this.handleClose();
+    },
     emitChange() {
       this.$emit(
         "input",