如标题所言，该文章主要是为了实现该功能，目前大致有两种方法：
- 伪元素
- 检测是否空渲染再显示
先看看我们需要的效果：
图 0
不错，目的就是为了给没数据的列添加-字符。接下来看方法：
伪元素
从以下链接查看到，各位可以点过去看看：
Table组件优雅的给空内容添加 “—“ 值_antd table 空值替换-CSDN博客
缺点是无法复制
检测是否空渲染再显示
我是将a-table包裹了一层，方便统一处理：
<a-table
...
>
<template v-for="(item, key, index) in tableSlotsWithoutbodyCell" :key="index" v-slot:
[item]="data">
<slot :name="key" v-bind="data"></slot>
</template>
<template #bodyCell="{ text, record, index, column }">
<RenderBodyCell :data="{ text, record, index, column }" :bodyCell="bodyCell">
<div
style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
>
{{ text ? text : !disableEmptyLine ? "-" : "" }}
</div>
</RenderBodyCell>
</template>
</a-table>
借鉴思路即可，目的是通过代理bodyCell插槽，如果用户提供的插槽渲染了节点，那么就使用用户的插槽，如果用户没提供插槽或者渲染，就使用默认的检测，即如果有值则显示值，如果没有值，这显示-。这样的话灵活度高一点。
RenderBodyCell代码如下:
<script lang="ts" setup>
const props = defineProps<{
bodyCell: any // 将bodyCell插槽传递过来
data: any
}>()
const parentRef = ref<HTMLElement>()
const hasChildren = computed(() => {
return parentRef.value !== undefined ? !!parentRef.value?.childElementCount : parentRef.value
})
const defaultComp = computed(() => {
return props.bodyCell ? () => props.bodyCell(props.data) : undefined
})
</script>
<template>
<div ref="parentRef">
<defaultComp v-if="!!defaultComp"></defaultComp>
<slot v-if="hasChildren !== undefined && !hasChildren"></slot>
</div>
</template>