浏览代码

修改bug

695593266@qq.com 2 天之前
父节点
当前提交
c22b6e7677
共有 1 个文件被更改,包括 23 次插入5 次删除
  1. 23 5
      src/views/system/menu/index.vue

+ 23 - 5
src/views/system/menu/index.vue

@@ -59,7 +59,7 @@
             <span v-if="row.icon" class="menu-icon-wrap">
               <i :class="row.icon"></i>
             </span>
-            <span class="menu-name-text">{{ row.name }}</span>
+            <span class="menu-name-text" :title="row.name">{{ row.name }}</span>
           </span>
         </template>
         <!-- 标题列 -->
@@ -165,7 +165,7 @@
           {
             columnKey: 'index',
             type: 'index',
-            width: 45,
+            width: 68,
             align: 'center',
             showOverflowTooltip: false,
             fixed: 'left'
@@ -174,7 +174,8 @@
             prop: 'name',
             label: '菜单名称',
             showOverflowTooltip: true,
-            minWidth: 180,
+            minWidth: 240,
+            className: 'menu-name-column',
             slot: 'name'
           },
           {
@@ -426,6 +427,19 @@
       border-color: #edf2f7;
     }
 
+    ::v-deep .el-table__fixed .el-table__cell:first-child .cell,
+    ::v-deep .el-table__body .el-table__cell:first-child .cell {
+      white-space: nowrap;
+      word-break: keep-all;
+    }
+
+    ::v-deep .menu-name-column .cell {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      white-space: nowrap;
+    }
+
     ::v-deep .el-table__row {
       transition: none;
     }
@@ -484,6 +498,8 @@
   .menu-name-cell {
     display: inline-flex;
     align-items: center;
+    flex: 1 1 auto;
+    min-width: 0;
     max-width: 100%;
     gap: 8px;
     color: #26384d;
@@ -521,7 +537,7 @@
     }
 
     .menu-name-text {
-      padding: 3px 9px 3px 0;
+      padding: 3px 4px 3px 0;
       border-radius: 0 6px 6px 0;
       color: #354a62;
       background: #f7fbff;
@@ -542,7 +558,9 @@
   }
 
   .menu-name-text {
-    min-width: 0;
+    display: block;
+    flex: 1 1 auto;
+    min-width: 24px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;