参与者 (player) 字段 3 种判断写法(字符串 / 多人名逗号分隔 / 数组三种接口格式)
后端返回 3 种常见格式:
- 字符串:
player:"张三"/player:""/player:null - 逗号拼接:
player:"张三,李四,王五" - 数组:
player:["张三","李四"]
一、表格单元格判断(ElementPlus)
方式 1:插槽 v-if 判断(最常用)
vue
<el-table-column label="参与参与者">
<template #default="scope">
<!-- 去除首尾空格,判断非空 -->
<span v-if="scope.row.player?.trim()">
{{ scope.row.player }}
</span>
<span v-else style="color:#999">暂无参与者</span>
</template>
</el-table-column>
方式 2:formatter 统一格式化
vue
<el-table-column label="参与者" :formatter="formatPlayer"/>
<script setup>
// 格式化:空→暂无参与者
const formatPlayer = (row) => {
const val = row.player?.trim()
return val || '暂无参与者'
}
</script>
二、详情页单独展示判断
vue
<!-- 字符串格式 -->
<div>
<span>参与者:</span>
<span v-if="detail.player?.trim()">{{detail.player}}</span>
<span v-else style="color:#aaa">无</span>
</div>
三、如果后端是【数组格式】player:["张三","李四"]
vueble-column label="参与者">
<template #default="scope">
<span v-if="scope.row.player?.length">
{{ scope.row.player.join('、') }}
</span>
<span v-else>暂无参与者</span>
</template>
</el-table-column>

