Merge pull request #4397 from jumpserver/pr@dev@perf_reveiver

style: Set special receiver to optimize the scroll wheel display

src/styles/index.scss

@@ -593,3 +593,9 @@ li.rmenu i.fa {
     height: 6px; /* 设置水平滚动条的高度 */
   }
 }
+
+.black-theme-popover {
+  width: 300px;
+  max-height: 700px;
+  overflow-y: scroll;
+}

src/views/settings/Msg/Subscribe/index.vue

@@ -26,11 +26,14 @@
             </span>
           </template>
         </el-table-column>
-        <el-table-column :label="$tc('Receivers')" show-overflow-tooltip>
+        <el-table-column :label="$tc('Receivers')">
-          <template v-slot="scope">
+          <template slot-scope="scope">
-            <span v-if="!scope.row.children">
+            <el-popover trigger="hover" placement="top" popper-class="black-theme-popover">
-              {{ scope.row.receivers.map(item => item.name).join(', ') }}
+              <p v-for="item in scope.row.receivers" :key="item.name">{{ item.name }}</p>
-            </span>
+              <span v-if="!scope.row.children" slot="reference" class="name-wrapper">
+                {{ scope.row.receivers.map(item => item.name).join(', ') }}
+              </span>
+            </el-popover>
           </template>
         </el-table-column>
         <el-table-column :label="$tc('Actions')" width="200">
@@ -186,4 +189,25 @@ export default {
   margin-bottom: 0;
   width: 50%;
 }
+
+::v-deep .el-table .cell {
+  display: flex;
+
+  .name-wrapper {
+    display: inline-block;
+    max-height: 55px;
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+}
+
+::v-deep .black-theme-popover .el-popover__inner {
+  background-color: #000 !important;
+  color: #fff !important;
+  border-color: #000 !important;
+}
 </style>