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

问题解决,特此记录!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/15066.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【金砖赛】基于docker搭链

一&#xff0e;基于docker搭建 启动并检查是否启动成功 #启动命令 sudo systemctl start docker#检查命令 sudo systemctl status docker修改权限 chomd 777 build_chain.sh 进行4节点联盟链搭建&#xff08;举例&#xff09; sudo ./build_chain.sh -d -l "127.0.0.1…

OOM不会导致JVM退出

问题来源 一次生产事故&#xff0c;由于一次性从数据库查询过多数据导致线程 OOM&#xff1a;Java heap space 异常&#xff08;千万级表&#xff0c;JVM堆内存2G&#xff09;&#xff0c;但是在线程OOM发生时&#xff0c;java进程却没有立即挂掉。 ##OOM与异常 说到底OutOfM…

基于Android Studio记事本系统

目录 项目介绍 图片展示 运行环境 获取方式 项目介绍 具有登录&#xff0c;注册&#xff0c;记住密码&#xff0c;自动登录的功能&#xff1b; 可以新增记事本&#xff0c;编辑&#xff0c;删除记事本信息&#xff0c;同时可以设置主标题&#xff0c;内容&#xff0c;以及…

Ansible自动化运维中的Setup收集模块应用详解

作者主页&#xff1a;点击&#xff01; Ansible专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年5月22日13点14分 &#x1f4af;趣站推荐&#x1f4af; 前些天发现了一个巨牛的&#x1f916;人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xf…

服务器没有图形界面没有显示器怎么办

可以用vnc。 vnc是开元的。什么是vnc&#xff1f; 使用vnc 下载vnc和vncserver命令。 每生成一个图形界面就叫做开启session会话。 vnc相关命令&#xff1a; start a new session: vncserver。 如果没有会话&#xff0c;一般从:1开始 端口5901 vncserver :2 #指定会话为:2 端…

WinForm+SQL Server+.NET开发菜鸟驿站管理系统

完整效果看哔哩哔哩&#xff0c;有需要其他系统&#xff0c;可以私信

Leecode热题100---55:跳跃游戏(贪心算法)

题目&#xff1a; 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 贪心算…

Spring中的三级缓存和循环依赖

三级缓存 在 Spring 中&#xff0c;Bean 的创建过程涉及到三级缓存。这三级缓存分别是 singletonObjects、earlySingletonObjects 和 singletonFactories。它们在 Spring 容器启动时用于存储正在创建的 Bean 实例。 在 Spring 源码中&#xff0c;三级缓存涉及到了 DefaultSin…

python02 循环与容器

一、if的条件判断 1-1 if elif else 判断年龄属于哪个年龄段 # 判断学生 core input(请输入成绩) ​ if int(core) >90 :print(优秀) elif int(core) >70 and int(core) <90:print(中等) elif int(core) >60 and int(core) <70:print(及格) else:print(不及…

20240521在Ubuntu20.04下编译RK3588的IPC方案的编译环境问题makeinfo: not found

20240521在Ubuntu20.04下编译RK3588的IPC方案的编译环境问题makeinfo: not found 2024/5/21 20:52 viewproviewpro-ThinkBook-16-G5-IRH:~/RK3588_IPC_SDK$ sudo apt-get install texinfo viewproviewpro-ThinkBook-16-G5-IRH:~$ viewproviewpro-ThinkBook-16-G5-IRH:~$ md5su…

【Basic】Linux Labs

文章目录 前言一、Linux Labs二、知识点ssh介绍ssh的主要功能SSH的工作原理SSH的常见用法 解题感悟 前言 由于我参加了网络安全的比赛(被迫)… but我毛都不会&#xff0c;所以我只能临时抱佛脚… 顺便把学习的过程记录下来&#xff0c;欢迎收看小白0基础ctf踩坑分享 一、Linux…

【正点原子Linux连载】 第四十六章 M.2硬盘驱动实验摘自【正点原子】ATK-DLRK3568嵌入式Linux驱动开发指南

1&#xff09;实验平台&#xff1a;正点原子ATK-DLRK3568开发板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id731866264428 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/docs/boards/xiaoxitongban 第四十…

【selenium】自动化测试chrome webdriver驱动下载网址,V123版本以上

Hi&#xff0c;大家好&#xff0c;今天和大家分享下最新的selenium自动化测试&#xff0c;chrome浏览器驱动下载的最新地址 chrome webdriver下载网址&#xff0c;适用于浏览器版本V123以上

结构型模式 (Python版)

代理模式 from abc import ABC, abstractmethod# 买的行为&#xff08;抽象类&#xff09; class Buy(ABC):abstractmethoddef buy_ticket(self):pass# 男人&#xff08;具体类&#xff09; class Man(Buy):# 男人买票def buy_ticket(self):print("Man 买票成功&#xff…

【输入示例100,999 输出示例4】水仙花数

// “水仙花数”是指一个三位正整数&#xff0c;其各位上的数字的立方和等于该数本身。如:1^35^33^3153&#xff0c;因此153是一个水仙花数。输入两个三位正整数a和b(其中a<b)&#xff0c;求[a,b]范围内水仙花数的个数。 //输入示例100,999 //输出示例4 #include <stdio.…

AI爆文写作:如果你有一篇文章爆了,正确的做法是:自己抄袭自己,重复发,还可以继续爆!

爆款总是相似的&#xff0c;如果你有一篇文章爆了&#xff0c;正确的做法&#xff0c;就是重复发&#xff0c;让它继续爆下去。 以前我在小红书看到一个人&#xff0c;将一篇自己火的笔记&#xff0c;连续发了5次&#xff0c;每次点赞数据都不错。 公众号文章也是一样的。 我…

Gin与OpenAPI(Swagger)的使用

一、背景 1、swagger与openapi Swagger&#xff1a; 一种用于描述RESTFUL API的规范&#xff0c;它提供了一种简单的来描述API的请求和相应参数、错误码、返回数据类型等信息&#xff0c;是开发者可以方便了解API使用方式。 官网: https://swagger.io/ OpenAPI : 始于 …

gazebo仿真不起飞——QGC地面站查看下是否参数正确

检查方法&#xff1a;打开QGC地面站查看是否能够切入定点模式&#xff0c;不能的话查看定位数据来源参数

uniapp(微信小程序)退出小程序方法

一、描述 场景是&#xff1a;当用户不予授权的时候&#xff0c;不允许使用该小程序&#xff0c;在用户点击取消之后&#xff0c;应该关闭当前小程序&#xff0c;不让他继续使用。 二、代码 uni.exitMiniProgram({success: function() {console.log(退出小程序成功);},fail: …

鸿蒙HarmonyOS实战-Stage模型(信息传递载体Want)

&#x1f680;前言 应用中的信息传递是为了实现各种功能和交互。信息传递可以帮助用户和应用之间进行有效的沟通和交流。通过信息传递&#xff0c;应用可以向用户传递重要的消息、通知和提示&#xff0c;以提供及时的反馈和指导。同时&#xff0c;用户也可以通过信息传递向应用…