From b7868e804d0c0ec647668691119b504ff80a1efe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com>
Date: Fri, 21 Apr 2023 16:34:36 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E8=87=AA=E5=AE=9A=E4=B9=89=E5=B9=B3?=
 =?UTF-8?q?=E5=8F=B0=E5=8D=8F=E8=AE=AE=E5=90=8D=E7=A7=B0=E5=AE=BD=E5=BA=A6?=
 =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FormFields/ProtocolSelector/index.vue     | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/FormFields/ProtocolSelector/index.vue b/src/components/FormFields/ProtocolSelector/index.vue
index f33118657..e1780429f 100644
--- a/src/components/FormFields/ProtocolSelector/index.vue
+++ b/src/components/FormFields/ProtocolSelector/index.vue
@@ -12,9 +12,12 @@
           slot="prepend"
           :disabled="disableSelect(item)"
           :value="item.display_name ? item.display_name : item.name"
-          class="prepend"
+          class="prepend auto-width-select"
           @change="handleProtocolChange($event, item)"
         >
+          <template slot="prefix">
+            {{ item.display_name ? item.display_name : item.name }}
+          </template>
           <el-option
             v-for="p of remainProtocols"
             :key="p.name"
@@ -267,15 +270,11 @@ export default {
   }
 }
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .el-select .el-input {
   width: 130px;
 }
 
-.el-select {
-  max-width: 120px;
-}
-
 .input-with-select {
   flex-shrink: 1;
   width: calc(100% - 80px) !important;
@@ -310,4 +309,30 @@ export default {
   color: #1a1a1a;
   padding: 9px 20px;
 }
+
+.auto-width-select > .el-input--prefix {
+  min-width: 120px!important;
+}
+
+.auto-width-select >>> .el-input__prefix {
+    position: relative;
+    left: 0px;
+    padding: 0 30px;
+    box-sizing: border-box;
+    height: 34px;
+    line-height: 34px;
+    visibility: hidden;
+}
+
+.auto-width-select >>> input {
+  position: absolute!important;
+  width: 100%!important;
+  border: none;
+  color: #606266;
+  background-color: #e6e6e6;
+  font-size: 12px;
+  font-weight: 470;
+  line-height: 27px;
+}
+
 </style>