<template>
|
<RenderTableColumn v-bind="column" />
|
</template>
|
|
<script setup lang="tsx" name="TableColumn">
|
import { inject, ref, useSlots } from "vue";
|
import { ColumnProps, RenderScope, HeaderRenderScope } from "@/components/ProTable/interface";
|
import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from "@/utils";
|
|
defineProps<{ column: ColumnProps }>();
|
|
const slots = useSlots();
|
|
const enumMap = inject("enumMap", ref(new Map()));
|
|
// 渲染表格数据
|
// 渲染表格数据
|
const renderCellData = (item: ColumnProps, scope: RenderScope<any>) => {
|
const value = handleRowAccordingToProp(scope.row, item.prop!);
|
|
// 如果值为 null 或 undefined，返回 "--"
|
if (value === null || value === undefined || value === "null" || value === "") return "--";
|
|
return enumMap.value.get(item.prop) && item.isFilterEnum
|
? filterEnum(value, enumMap.value.get(item.prop)!, item.fieldNames)
|
: formatValue(value);
|
};
|
// 获取 tag 类型
|
const getTagType = (item: ColumnProps, scope: RenderScope<any>) => {
|
return (
|
filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop), item.fieldNames, "tag") || "primary"
|
);
|
};
|
|
const RenderTableColumn = (item: ColumnProps) => {
|
return (
|
<>
|
{item.isShow && (
|
<el-table-column
|
{...item}
|
align={item.align ?? "center"}
|
showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== "operation"}
|
>
|
{{
|
default: (scope: RenderScope<any>) => {
|
if (item._children) return item._children.map(child => RenderTableColumn(child));
|
|
// 先获取值并检查是否为 null/undefined/"null"
|
const value = item.prop ? handleRowAccordingToProp(scope.row, item.prop) : null;
|
const isEmpty = value === null || value === undefined || value === "null" || value === "-1" || value === "";
|
|
// 如果是空值，直接返回 "--"
|
if (isEmpty && item.prop) return "--";
|
|
// 自定义渲染
|
if (item.render) return item.render(scope);
|
if (item.prop && slots[handleProp(item.prop)]) return slots[handleProp(item.prop)]!(scope);
|
if (item.tag) return <el-tag type={getTagType(item, scope)}>{renderCellData(item, scope)}</el-tag>;
|
return renderCellData(item, scope);
|
},
|
header: (scope: HeaderRenderScope<any>) => {
|
if (item.headerRender) return item.headerRender(scope);
|
if (item.prop && slots[`${handleProp(item.prop)}Header`]) return slots[`${handleProp(item.prop)}Header`]!(scope);
|
return item.label;
|
}
|
}}
|
</el-table-column>
|
)}
|
</>
|
);
|
};
|
</script>
|
