From 1c4828154e3634dba5f93a92ccc5c3134e8fdb33 Mon Sep 17 00:00:00 2001
From: song-tianyang <tianyang.song@fit2cloud.com>
Date: Tue, 7 Jun 2022 18:07:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E8=BF=87=E5=A4=9A=E6=97=B6tooltip=E6=B2=A1=E6=9C=89?=
 =?UTF-8?q?=E5=88=86=E9=9A=94=E7=AC=A6=E5=8F=B7=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1013767 --user=宋天阳 【接口测试】github#14266 接口列表标签过多时，Tag显示需要有分隔
https://www.tapd.cn/55049933/s/1175425
---
 .../definition/components/list/ApiList.vue    | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/business/components/api/definition/components/list/ApiList.vue b/frontend/src/business/components/api/definition/components/list/ApiList.vue
index 6405fdbbd4..f9d1a39f40 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiList.vue
@@ -119,11 +119,17 @@
           :field="item"
           :fields-width="fieldsWidth"
           min-width="80px"
+          :show-overflow-tooltip = false
           :label="$t('commons.tag')">
           <template v-slot:default="scope">
-            <ms-tag v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain"
-                    :show-tooltip="scope.row.tags.length===1&&itemName.length*12<=100" :content="itemName"
-                    style="margin-left: 0px; margin-right: 2px"/>
+            <el-tooltip class="item" effect="dark" placement="top">
+              <div v-html="getTagToolTips(scope.row.tags)" slot="content"></div>
+              <div class="oneLine">
+                <ms-tag v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain"
+                        :show-tooltip="scope.row.tags.length===1&&itemName.length*12<=100" :content="itemName"
+                        style="margin-left: 0px; margin-right: 2px"/>
+              </div>
+            </el-tooltip>
             <span/>
           </template>
         </ms-table-column>
@@ -952,6 +958,17 @@ export default {
           }
         });
       }
+    },
+    getTagToolTips(tags){
+      try{
+        let showTips = "";
+        tags.forEach( item => {
+          showTips += item + ",";
+        })
+        return showTips;
+      }catch (e){
+        return "";
+      }
     }
   },
 };
@@ -996,8 +1013,10 @@ export default {
   padding-right: 100%;
 }
 
-/* /deep/ .el-table__fixed-body-wrapper {
-  top: 60px !important;
-} */
+.oneLine {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 
 </style>