问题的产生
在工作时遇到一个场景,需要在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;
},
...
};
});
这样便解决了这个问题。
感谢大家阅读,也同样希望大家能提出宝贵意见指正,帮我成长,共同进步,非常感谢!