优化pagetype列表页,控制不渲染badge背景占位

This commit is contained in:
jingrow 2025-11-02 17:22:31 +08:00
parent 5113228bc8
commit e06ea21f36

View File

@ -118,7 +118,7 @@
<template v-for="f in cardBadges" :key="f.key"> <template v-for="f in cardBadges" :key="f.key">
<!-- Select字段使用独立的span不包裹在.badge中 --> <!-- Select字段使用独立的span不包裹在.badge中 -->
<span <span
v-if="isSelectField(f.key) && row[f.key]" v-if="isSelectField(f.key) && row[f.key] !== null && row[f.key] !== undefined && row[f.key] !== ''"
class="select-badge" class="select-badge"
:style="{ :style="{
backgroundColor: getSelectBadgeColor(f.key, row[f.key]), backgroundColor: getSelectBadgeColor(f.key, row[f.key]),
@ -127,8 +127,8 @@
> >
{{ formatDisplayValue(row[f.key], f.key) }} {{ formatDisplayValue(row[f.key], f.key) }}
</span> </span>
<!-- 其他字段使用.badge包裹 --> <!-- 其他字段使用.badge包裹只在有值时渲染 -->
<span v-else class="badge"> <span v-else-if="row[f.key] !== null && row[f.key] !== undefined && row[f.key] !== ''" class="badge">
<template v-if="isBooleanField(f.key) && (row[f.key] === 1 || row[f.key] === 0 || typeof row[f.key] === 'boolean')"> <template v-if="isBooleanField(f.key) && (row[f.key] === 1 || row[f.key] === 0 || typeof row[f.key] === 'boolean')">
<span v-if="row[f.key] === 1 || row[f.key] === true" class="boolean-true"></span> <span v-if="row[f.key] === 1 || row[f.key] === true" class="boolean-true"></span>
<span v-else class="boolean-false"></span> <span v-else class="boolean-false"></span>
@ -223,7 +223,7 @@
<template v-else-if="isIconField(col.key) && row[col.key]"> <template v-else-if="isIconField(col.key) && row[col.key]">
<Icon :icon="row[col.key]" :width="20" :height="20" class="icon-gray" /> <Icon :icon="row[col.key]" :width="20" :height="20" class="icon-gray" />
</template> </template>
<template v-else-if="isSelectField(col.key) && row[col.key]"> <template v-else-if="isSelectField(col.key) && row[col.key] !== null && row[col.key] !== undefined && row[col.key] !== ''">
<span <span
class="select-badge" class="select-badge"
:style="{ :style="{
@ -234,7 +234,7 @@
{{ formatDisplayValue(row[col.key], col.key) }} {{ formatDisplayValue(row[col.key], col.key) }}
</span> </span>
</template> </template>
<template v-else>{{ formatDisplayValue(row[col.key], col.key) }}</template> <template v-else-if="row[col.key] !== null && row[col.key] !== undefined && row[col.key] !== ''">{{ formatDisplayValue(row[col.key], col.key) }}</template>
</div> </div>
<!-- 操作列覆盖组件 --> <!-- 操作列覆盖组件 -->
<component <component