Преглед изворни кода

fix(project): 树形子行序号垂直居中(改用 flex 居中 .cell)

- 上一版 vertical-align:middle 对 el-table 树形子行无效: 序号列是裸文本,
  同行其他列是 el-button/el-tag 行内块, 基线不同导致裸文本偏上
- 改为 :deep(.el-table .cell){display:flex;align-items:center} 统一垂直居中
- 右对齐列(序号/关联资源数) flex 下 text-align 失效, 补 class-name + justify-content:flex-end
- 序号/关联资源数列加 class-name col-seq / col-res
C пре 2 месеци
родитељ
комит
ac9513e1c5
1 измењених фајлова са 12 додато и 2 уклоњено
  1. 12 2
      frontend/src/views/project/ProjectList.vue

+ 12 - 2
frontend/src/views/project/ProjectList.vue

@@ -36,7 +36,7 @@
       </el-form>
 
       <el-table :data="treeData" v-loading="loading" row-key="id" :tree-props="{ children: 'children' }" default-expand-all>
-        <el-table-column label="序号" width="72" header-align="right" align="right">
+        <el-table-column label="序号" width="72" header-align="right" align="right" class-name="col-seq">
           <template #default="{ row }">{{ row.seq }}</template>
         </el-table-column>
         <el-table-column label="项目名称" min-width="200">
@@ -46,7 +46,7 @@
           </template>
         </el-table-column>
         <el-table-column prop="ownerName" label="负责人" width="100" />
-        <el-table-column prop="resourceCount" label="关联资源数" width="110" header-align="right" align="right" />
+        <el-table-column prop="resourceCount" label="关联资源数" width="110" header-align="right" align="right" class-name="col-res" />
         <el-table-column label="状态" width="100">
           <template #default="{ row }">
             <span :class="['status-badge', row.status === 1 ? 'status-badge--success' : 'status-badge--disabled']">
@@ -203,4 +203,14 @@ onMounted(async () => {
   margin: 4px 0 16px;
 }
 .muted-tip { color: var(--color-text-placeholder); font-size: 12px; }
+/* 单元格内容垂直居中: 解决树形子行序号(裸文本)与同行为 el-button/el-tag 不对齐 */
+:deep(.el-table .cell) {
+  display: flex;
+  align-items: center;
+}
+/* flex 下 text-align 失效, 右对齐列需补 justify-content */
+:deep(.col-seq .cell),
+:deep(.col-res .cell) {
+  justify-content: flex-end;
+}
 </style>