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

青颜的天空2024-05-25 20:17

问题的产生

Vue版本：3.3.13

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

在工作时遇到一个场景，需要在 ant-table 的 checkbox 被禁用的时候提示原因，但是在 ant-design-vue 文档中并没有发现有相关介绍。

首先我去看了issue中是否有提到相关问题，看了之后发现果然有，于是便看了下其他人的解决方法，感觉大概是重写选择逻辑，但是这样相对复杂，看到后面发现其实在rowSelection 参数中还有一个 renderCell 参数用来渲染勾选框，我以为就可以解决问题了，可是一看后面写的代码我发现它返回的是一个jsx。

typescript 复制代码

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渲染出来。

vue 复制代码

# 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 参数的代码。

typescript 复制代码

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

问题解决，特此记录!