Vue3中为Ant Design Vue中table的checkbox加tooltip、popover

问题的产生

Vue版本：3.3.13

ant-design-vue 版本：3.x.x

在工作时遇到一个场景，需要在 ant-table 的 checkbox 被禁用的时候提示原因，但是在 ant-design-vue 文档中并没有发现有相关介绍。
在这里插入图片描述
首先我去看了issue中是否有提到相关问题，看了之后发现果然有，于是便看了下其他人的解决方法，感觉大概是重写选择逻辑，但是这样相对复杂，看到后面发现其实在rowSelection 参数中还有一个 renderCell 参数用来渲染勾选框，我以为就可以解决问题了，可是一看后面写的代码我发现它返回的是一个jsx。

const rowSelection = computed<TableRowSelection | null>(() => {return {...renderCell(checked, record, index, node) {//被禁用if (record.disabled) { return <tooltip title="被禁用">{node}</tooltip>;}return node;},...};
});

解决方法

但在vue中这样实现有点奇怪，想了一下我决定自己改一下 popover 然后用popover 组件包住这个node渲染到节点上。我的 popover 是这么写的，用component把VNode渲染出来。

# SelectionCheckboxTooltip.vue
<script setup lang="ts">
import {VNode} from 'vue';const props = defineProps<{vn: VNode;tooltipMessage: string;
}>();
</script><template><a-popover><template #title>提示</template><template #content>{{ props.tooltipMessage }}</template><component :is="props.vn" /></a-popover>
</template>同时我改了下 renderCell 参数的代码。

/*** @description ant-table row 多选*/
const rowSelection = computed(() => {return {...renderCell: (_checked: boolean, record: any, _index: number, node: VNode) => {//被禁用的if (xxxx) {//第一个是组件，第二个是组件的propsreturn h(SelectionCheckboxTooltip, {vn: node, tooltipMessage: '被禁用'});}return node;},getCheckboxProps: (record: any) => ({disabled: xxxx,}),...};
});