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