From 13cad1671278ab77d0a6f79ed770f415b5f6bfc0 Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Fri, 17 May 2024 18:40:11 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=20Select2=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=AD=20tag=20=E5=80=BC=E5=9C=A8=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E6=97=B6=E7=94=B1id=E8=BD=AC=E4=B8=BAname=E5=AF=BC?=
 =?UTF-8?q?=E8=87=B4=E7=9A=84=E9=95=BF=E5=BA=A6=E5=8F=98=E5=8C=96=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Form/FormFields/Select2.vue | 37 ++++++++++++++++------
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/Form/FormFields/Select2.vue b/src/components/Form/FormFields/Select2.vue
index 6c70163c5..ac63cad7b 100644
--- a/src/components/Form/FormFields/Select2.vue
+++ b/src/components/Form/FormFields/Select2.vue
@@ -12,6 +12,7 @@
     :options="iOptions"
     :remote="remote"
     :remote-method="filterOptions"
+    :class="transformed ? 'hidden-tag' : 'show-tag'"
     class="select2"
     popper-append-to-body
     @change="onChange"
@@ -134,7 +135,8 @@ export default {
       iOptions: this.options || [],
       initialOptions: [],
       remote: true,
-      allSelected: false
+      allSelected: false,
+      transformed: true
     }
   },
   computed: {
@@ -295,6 +297,10 @@ export default {
         validateStatus
       })
       data = processResults.bind(this)(data)
+      setTimeout(() => {
+        this.transformed = false
+      }, 100)
+
       data.results.forEach((v) => {
         this.initialOptions.push(v)
         if (this.optionsValues.indexOf(v.value) === -1) {
@@ -409,18 +415,31 @@ export default {
 
 </script>
 
-<style scoped>
+<style scoped lang='scss'>
 .select2 {
   width: 100%;
-}
 
-.select2 >>> .el-tag.el-tag--info {
-  height: auto;
-  white-space: normal;
-}
+  &.hidden-tag {
+    ::v-deep .el-select__tags {
+      opacity: 0;
+      cursor: not-allowed;
+    }
+  }
 
-.select2 >>> input::placeholder {
-  padding-left: 2px;
+  &.show-tag {
+    ::v-deep .el-select__tags {
+      opacity: 1;
+    }
+  }
+
+  ::v-deep .el-tag.el-tag--info {
+    height: auto;
+    white-space: normal;
+  }
+
+  ::v-deep input::placeholder {
+    padding-left: 2px;
+  }
 }
 
 .el-select-dropdown__header {