NEZ-2734 fix: 解决表格描述列表单词换行截断问题

nezha-fronted/src/assets/css/common/tableCommon.scss

@@ -597,3 +597,10 @@
   line-height: 1;
   height: 16px;
 }
+
+.nz-table-list .el-table__body{
+  .el-table-remark{
+    word-wrap: break-word;
+    word-break: keep-all
+  }
+}

nezha-fronted/src/assets/css/components/page/tool/ping.scss

@@ -469,6 +469,7 @@ td.el-table__expanded-cell:hover {
         align-items: center;
         justify-content: center;
         font-size: 14px;
+        margin-left: 3px;
       }
     }
   }

nezha-fronted/src/assets/css/components/page/tool/trace.scss

@@ -213,6 +213,7 @@
                 align-items: center;
                 justify-content: center;
                 font-size: 14px;
+                margin-left: 3px;
               }
             }
           }

nezha-fronted/src/components/common/table/alert/alertMessageTable.vue

@@ -51,11 +51,7 @@
             </div>
           </template>
           <template v-else-if="item.prop === 'description'">
-            <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-            <span v-else>-</span>
-          </template>
-          <template v-else-if="item.prop === 'remark'">
-            <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+            <span v-if="scope.row[item.prop]" class="el-table-remark">{{scope.row[item.prop]}}</span>
             <span v-else>-</span>
           </template>
           <span v-else-if="item.prop === 'severityId'&&scope.row['severity']" class="severity">

nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue

@@ -103,7 +103,7 @@
                   </template>
               </copy>
         </template>
-        <span v-else-if="scope.row[item.prop]">{{
+        <span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{
           scope.row[item.prop] || "-"
         }}</span>
         <template v-else>-</template>

nezha-fronted/src/components/common/table/settings/cabinetTable.vue

@@ -22,7 +22,7 @@
       :key="`col-${index}`"
       :label="item.label">
       <template slot-scope="scope" :column="item">
-        <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+        <span v-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
         <template v-else>-</template>
       </template>
     </el-table-column>

nezha-fronted/src/components/common/table/settings/credentialsTable.vue

@@ -61,9 +61,9 @@
           <template v-else>-</template>
         </template>
         <template v-if="item.prop === 'remark'">
-          <template v-if="scope.row.remark">
+          <span v-if="scope.row.remark" class="el-table-remark">
             {{scope.row.remark}}
-          </template>
+          </span>
           <template v-else>-</template>
         </template>
       </template>

nezha-fronted/src/components/common/table/settings/dashboardTmplTable.vue

@@ -48,7 +48,7 @@
             </template>
           </copy>
         </template>
-        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
+        <span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop] || '-'}}</span>
         <template v-else>-</template>
       </template>
     </el-table-column>

nezha-fronted/src/components/common/table/settings/exprTmplTable.vue

@@ -49,7 +49,7 @@
                   </template>
               </copy>
           </template>
-        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
+        <span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop] || '-'}}</span>
         <template v-else>-</template>
       </template>
     </el-table-column>

nezha-fronted/src/components/common/table/settings/ipDetailsTable.vue

@@ -49,7 +49,7 @@
             {{ 'Used' }}
           </div>
         </template>
-        <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+        <span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
         <template v-else>-</template>
       </template>
     </el-table-column>

nezha-fronted/src/components/common/table/settings/ipamTable.vue

@@ -53,7 +53,7 @@
                   </template>
               </copy>
           </template>
-        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+        <span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
         <span v-else>-</span>
       </template>
     </el-table-column>

nezha-fronted/src/components/common/table/settings/mibTable.vue

@@ -78,7 +78,7 @@
           </div>
         </template>
         <span v-else-if="item.prop === 'updateAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
-        <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+        <span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
         <template v-else>-</template>
       </template>
     </el-table-column>

nezha-fronted/src/components/common/table/settings/modelTable.vue

@@ -74,7 +74,7 @@
           {{scope.row[item.prop]}}
           </span>
         </template>
-        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+        <span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
         <span v-else>-</span>
       </template>
     </el-table-column>

nezha-fronted/src/components/common/table/settings/moduleTable.vue

@@ -80,7 +80,7 @@
           {{scope.row.dashboard ? scope.row.dashboard.name : '-'}}
         </template>
         <span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
-        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+        <span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
         <span v-else>-</span>
       </template>
     </el-table-column>

nezha-fronted/src/components/common/table/settings/recordRuleTable.vue

@@ -87,7 +87,7 @@
         </template>
 
         <template v-else-if="item.prop === 'remark'">
-          <template>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</template>
+          <span class="el-table-remark">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
         </template>
         <template v-else-if="item.prop === 'state'">
            <div v-if="scope.row[item.prop] == '1'">

nezha-fronted/src/components/common/table/settings/roleTable.vue

@@ -51,7 +51,7 @@
               </copy>
           </template>
         </template>
-        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+        <span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
         <span v-else>-</span>
       </template>
     </el-table-column>

nezha-fronted/src/components/page/config/mibBrowser.vue

@@ -126,7 +126,7 @@
               </div>
               <div class="mib-browser-detail-row">
                 <div>Description</div>
-                <div>{{currentWalk.description}}</div>
+                <div class="el-table-remark">{{currentWalk.description}}</div>
               </div>
             </div>
           </div>

nezha-fronted/src/components/page/config/system/selfApiKeyTable.vue

@@ -52,9 +52,9 @@
             <template v-if="item.prop == 'createAt'">
               {{scope.row[item.prop]?utcTimeToTimezoneStr(scope.row[item.prop]):'-'}}
             </template>
-             <template v-if="item.prop == 'remark'">
+             <span v-if="item.prop == 'remark'" class="el-table-remark">
               {{scope.row[item.prop]?scope.row[item.prop]:'-'}}
-            </template>
+            </span>
         </template>
       </el-table-column>
       <el-table-column