mod 配置类型展示,优化样式及布局,调整宽度和对齐方式

pull/853/head
wersd 2025-11-24 21:36:14 +08:00
parent 63c3e8ab66
commit 4cd6de36c2
1 changed files with 46 additions and 71 deletions

View File

@ -271,26 +271,20 @@
{{ getUserName(scope.row.inspector) }} {{ getUserName(scope.row.inspector) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="配置类型" align="center" prop="configType" width="150"> <el-table-column label="配置类型" align="center" prop="configType" width="180">
<template #default="scope"> <template #default="scope">
<el-tooltip <div class="table-config-types">
v-if="getRecordConfigTypes(scope.row.configType).length > 0" <el-tag
:content="getRecordConfigTypes(scope.row.configType).join('、')" v-for="configType in getRecordConfigTypes(scope.row.configType)"
placement="top" :key="configType"
> size="small"
<div class="table-config-types"> type="info"
<el-tag class="config-type-tag"
v-for="configType in getRecordConfigTypes(scope.row.configType)" >
:key="configType" {{ configType }}
size="small" </el-tag>
type="info" <span v-if="getRecordConfigTypes(scope.row.configType).length === 0" class="text-gray-400">-</span>
class="config-type-tag" </div>
>
{{ configType }}
</el-tag>
</div>
</el-tooltip>
<span v-else class="text-gray-400">-</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态" align="center" prop="status"> <el-table-column label="状态" align="center" prop="status">
@ -361,26 +355,20 @@
{{ getUserName(scope.row.inspector) }} {{ getUserName(scope.row.inspector) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="配置类型" align="center" prop="configType" width="150"> <el-table-column label="配置类型" align="center" prop="configType" width="180">
<template #default="scope"> <template #default="scope">
<el-tooltip <div class="table-config-types">
v-if="getRecordConfigTypes(scope.row.configType).length > 0" <el-tag
:content="getRecordConfigTypes(scope.row.configType).join('、')" v-for="configType in getRecordConfigTypes(scope.row.configType)"
placement="top" :key="configType"
> size="small"
<div class="table-config-types"> type="info"
<el-tag class="config-type-tag"
v-for="configType in getRecordConfigTypes(scope.row.configType)" >
:key="configType" {{ configType }}
size="small" </el-tag>
type="info" <span v-if="getRecordConfigTypes(scope.row.configType).length === 0" class="text-gray-400">-</span>
class="config-type-tag" </div>
>
{{ configType }}
</el-tag>
</div>
</el-tooltip>
<span v-else class="text-gray-400">-</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态" align="center" prop="status"> <el-table-column label="状态" align="center" prop="status">
@ -450,26 +438,20 @@
{{ getUserName(scope.row.inspector) }} {{ getUserName(scope.row.inspector) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="配置类型" align="center" prop="configType" width="150"> <el-table-column label="配置类型" align="center" prop="configType" width="180">
<template #default="scope"> <template #default="scope">
<el-tooltip <div class="table-config-types">
v-if="getRecordConfigTypes(scope.row.configType).length > 0" <el-tag
:content="getRecordConfigTypes(scope.row.configType).join('、')" v-for="configType in getRecordConfigTypes(scope.row.configType)"
placement="top" :key="configType"
> size="small"
<div class="table-config-types"> type="info"
<el-tag class="config-type-tag"
v-for="configType in getRecordConfigTypes(scope.row.configType)" >
:key="configType" {{ configType }}
size="small" </el-tag>
type="info" <span v-if="getRecordConfigTypes(scope.row.configType).length === 0" class="text-gray-400">-</span>
class="config-type-tag" </div>
>
{{ configType }}
</el-tag>
</div>
</el-tooltip>
<span v-else class="text-gray-400">-</span>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column label="备注" align="center" prop="remark" /> --> <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
@ -1278,27 +1260,20 @@ watch(list, (newList) => {
.table-config-types { .table-config-types {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; justify-content: center;
gap: 4px;
justify-content: flex-start;
align-items: center; align-items: center;
gap: 6px;
width: 100%; width: 100%;
min-height: 24px;
.config-type-tag { .config-type-tag {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
} max-width: none;
overflow: visible;
.config-type-more { text-overflow: clip;
cursor: pointer;
background-color: #909399;
border-color: #909399;
&:hover {
background-color: #73767a;
border-color: #73767a;
}
} }
} }