记录Vue3环境下为Ant Design Vue中Table的checkbox加tooltip遇到的问题

问题的产生

在工作时遇到一个场景，需要在table的checkbox被禁用的时候提示原因，但是在Ant Desgin 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中这样实现有点奇怪，于是我便想在vue中应该怎么写，想了一下我决定自己改一下tooltip然后用tooltip组件包住这个node渲染到节点上。我的Tooltip是这么写的，用component把VNode渲染出来。

<script setup lang="ts">
import {VNode} from "vue";

let props = defineProps<{
	vn: VNode,
	tooltipMessage: string
}>();
</script>

<template>
	<a-tooltip>
		<template #title>{{ props.tooltipMessage }}</template>
		<component :is="props.vn"/>
	</a-tooltip>
</template>

同时我改了下renderCell参数的代码。

const rowSelection = computed<TableRowSelection | null>(() => {
	return {
		...
		renderCell(checked, record, index, node) {
			if (record.bindStatus) {
				//第一个是组件，第二个是组件的props
				return h(CheckBoxTooltip, {vn: node, tooltipMessage: tooltipMessage.value});
			}
			return node;
		},
		...
	};
});

这样便解决了这个问题。

感谢大家阅读，也同样希望大家能提出宝贵意见指正，帮我成长，共同进步，非常感谢！