<template>
|
<!--
|
tag 单元格：
|
- formatData 返回对象/数组（含 null）→ 逐个渲染 el-tag
|
- 其他（字符串/数字/布尔/undefined）→ 渲染单个 el-tag
|
与原实现等价：原实现先判断 string 再判断 object，两支的渲染结果完全相同。
|
-->
|
<template v-if="isObjectValue">
|
<el-tag v-for="(tag, index) in display" :key="index" :title="display" :type="tagType(tag)">{{ tag }}</el-tag>
|
</template>
|
<el-tag v-else :title="display" :type="valueType">{{ display }}</el-tag>
|
</template>
|
|
<script setup>
|
const props = defineProps({
|
value: {
|
type: [String, Number, Boolean, Object, Array],
|
default: undefined
|
},
|
formatData: {
|
type: Function,
|
default: undefined
|
},
|
formatType: {
|
type: Function,
|
default: undefined
|
}
|
})
|
|
// 页面传入的 formatData/formatType 可能抛错；这里兜底，避免单个单元格把整页渲染打挂。
|
function safeCall(fn, arg, fallback) {
|
if (typeof fn !== 'function') return fallback
|
try {
|
return fn(arg)
|
} catch (e) {
|
console.warn('[LimsTagCell] 格式化回调执行出错，已回退显示原值：', e)
|
return fallback
|
}
|
}
|
|
// formatData 为函数时先做一次转换，否则原样展示
|
const display = computed(() => safeCall(props.formatData, props.value, props.value))
|
|
// 与原实现一致：typeof === 'object'（null 也走这一支，v-for 遍历 null 渲染为空）
|
const isObjectValue = computed(() => typeof display.value === 'object')
|
|
// 单值分支的标签颜色，接收原始值
|
const valueType = computed(() => safeCall(props.formatType, props.value, undefined))
|
|
// 多值分支按每个元素取颜色
|
function tagType(tag) {
|
return safeCall(props.formatType, tag, undefined)
|
}
|
</script>
|
