問題的產生

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,}),...};
});

問題解決，特此記錄!