Browse Source

style: 修改表格问题描述列展示样式为大于40个字符以…结尾并移除hover

bxy 1 year ago
parent
commit
69e121475f
1 changed files with 11 additions and 3 deletions
  1. 11 3
      src/views/datamanager/alertformdata/components/common/AlertTable.vue

+ 11 - 3
src/views/datamanager/alertformdata/components/common/AlertTable.vue

@@ -13,9 +13,9 @@
           {{ getNameByType(row.source, row.issueType, [aiOptions, manualOptions]) }}
         </template>
       </el-table-column>
-      <el-table-column label="问题描述" prop="description" width="350">
+      <el-table-column label="问题描述" prop="description" width="500" show-overflow-tooltip>
         <template #default="{ row }">
-          <span>{{ row.description }}</span>
+          <span>{{ getSplicedDes(row.description) }}</span>
           <span class="detail-text" @click="handleDetailClick(row)"> 详情</span>
         </template>
       </el-table-column>
@@ -104,6 +104,14 @@ const handleDelete = (row) => {
   props.onDelete(row);
 };
 
+const getSplicedDes = (val) => {
+  if (val.length < 40) return val;
+  else {
+    const temp = val.substring(0, 40);
+    return temp + '…';
+  }
+};
+
 const colorOfState = ({ row, columnIndex }) => {
   if (columnIndex === 7) {
     if (row.issueState === 4) return { color: "#FF4D4F" };
@@ -136,7 +144,7 @@ onBeforeMount(() => {
 
 .detail-text {
   color: #1890FF;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
 }