mod 配置类型展示,优化样式及布局,调整宽度和对齐方式
parent
63c3e8ab66
commit
4cd6de36c2
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue