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) {
        //第一个是组件,第二个是组件的props
        return h(SelectionCheckboxTooltip, {vn: node, tooltipMessage: '被禁用'});
      }
      return node;
    },
    getCheckboxProps: (record: any) => ({
      disabled: xxxx,
    }),
    ...
  };
});

问题解决,特此记录!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【MATLAB源码-第214期】基于matlab的遗传算法GA最短路径路由优化算法仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 在现代网络通信和路径规划领域&#xff0c;最短路径路由优化算法是一项关键技术。它涉及在给定的网络拓扑中寻找从源点到目标点的最短或成本最低的路径。近年来&#xff0c;遗传算法&#xff08;GA&#xff09;因其出色的全局…

2024.05.18学习记录

1、Vue3 Composition API Vite jsx 2、react 基本使用、高级用法 3、刷题&#xff1a;回溯部分剩下的题目

轻松拿捏C语言——【字符串函数】的使用及模拟实现

&#x1f970;欢迎关注 轻松拿捏C语言系列&#xff0c;来和 小哇 一起进步&#xff01;✊ &#x1f389;创作不易&#xff0c;请多多支持&#x1f389; &#x1f308;感谢大家的阅读、点赞、收藏和关注&#x1f495; &#x1f339;如有问题&#xff0c;欢迎指正 感谢 目录 一、…

java学习四

Random 随机数 数组 静态初始化数组 数组在计算机中的基本原理 数组的访问 什么是遍历 数组的动态初始化 动态初始化数组元素默认值规则 Java内存分配介绍 数组在计算机中的执行原理 使用数组时常见的一个问题 案例求数组元素最大值 public class Test1 {public static void ma…

香蕉成熟度检测YOLOV8NANO

香蕉成熟度检测YOLOV8NANO&#xff0c;采用YOLOV8NANO训练&#xff0c;得到PT模型&#xff0c;然后转换成ONNX模型&#xff0c;让OEPNCV调用&#xff0c;从而摆脱PYTORCH依赖&#xff0c;支持C。python&#xff0c;安卓开发。能检测六种香蕉类型freshripe freshunripe overripe…

Home Credit - Credit Risk Model Stability

本篇是对Kaggle上Home Credit - Credit Risk Model Stability竞赛中的开源代码VotingClassifier Home Credit的解读。原链接在VotingClassifier Home Credit (kaggle.com)。 %%writefile script.py import sys from pathlib import Path import subprocess import os import g…

LLM-Llama在 MAC M1上体验Llama.cpp和通义千问Qwen 1.5-7B

Llama.cpp的主要目标是在各种硬件上&#xff08;本地和云端&#xff09;实现LLM推断&#xff0c;同时保持最小的设置和最先进的性能。 纯C/C实现&#xff0c;没有任何依赖关系Apple芯片是一级的支持对象 - 通过ARM NEON、Accelerate和Metal框架进行优化对x86架构的AVX、AVX2和…

重学java 43.多线程 多等待多唤醒案例

Fear never builds the future,but hope does. —— 24.5.25 多等待多唤醒问题 在多条线程同时消费同时等待时&#xff0c;会出现问题 BaoZiPu package S77ThreadMoreWait;/*count和flag可以定义成包装类&#xff0c;但要记得给count和flag手动赋值不然对于本案例来说&#xff…

TCN 问题汇总

config 代码 import osemotion ["Valence"]### For preprocessing ### If tagged with "# Check this", then its adjustable, otherwise leave it alone. config {"extract_class_label": 1,"extract_continuous_label": 1,"…

Linux之DMA驱动详解(2)-sun6i-dma.c 驱动为例

一、DMA控制器硬件 1.1 DMA寄存器 DMA控制器 一般都会包含以下寄存器&#xff1a; DMA硬件描述符地址寄存器&#xff1a;存放 DMA描述符 的地址。DMA配置寄存器&#xff1a;配置 DMA 的 burst 、 width 、 传输方向 等属性。DMA使能寄存器&#xff1a;使能 DMA通道DMA中断状…

LLM 大模型学习必知必会系列(十一):大模型自动评估理论和实战以及大模型评估框架详解

LLM 大模型学习必知必会系列(十一)&#xff1a;大模型自动评估理论和实战以及大模型评估框架详解 0.前言 大语言模型&#xff08;LLM&#xff09;评测是LLM开发和应用中的关键环节。目前评测方法可以分为人工评测和自动评测&#xff0c;其中&#xff0c;自动评测技术相比人工…

暴雨“彩虹”行业大模型加速器平台全新发布

近日&#xff0c;在第七届数字中国建设峰会期间&#xff0c;暴雨信息全新发布“彩虹”行业大模型加速器平台&#xff0c;聚焦于为客户降本增效减负&#xff0c;将海量通用数据与行业特有数据融合&#xff0c;专注于流程工艺的智能化改进&#xff0c;因地制宜深挖业务需求&#…

第二十届文博会沙井艺立方分会场启幕!大咖齐打卡!

2024年5月24日-27日&#xff0c;第二十届中国&#xff08;深圳&#xff09;国际文化产业博览交易会沙井艺立方分会场活动将在艺立方非遗&#xff08;文旅&#xff09;产业园盛大举办。 本届文博会艺立方分会场活动办展特色鲜明&#xff0c;亮彩纷呈&#xff0c;将以“种下梧桐树…

win10无权禁用任务计划程序中的任务

问题说明 最近被win10的自动频繁更新搞得难受&#xff0c;发誓要彻底禁用这个家伙&#xff0c;于是网上找了教程执行&#xff0c;发现执行到禁用windows update计划任务时&#xff0c;提示&#xff1a; 这特么windows这个辣鸡系统&#xff0c;限制还真多&#xff01;&#xf…

【Linux】信号>信号产生信号处理信号保存信号详解

主页&#xff1a;醋溜马桶圈-CSDN博客 专栏&#xff1a;Linux_醋溜马桶圈的博客-CSDN博客 gitee&#xff1a;mnxcc (mnxcc) - Gitee.com 目录 1.信号入门 1.1 生活角度的信号 1.2 技术应用角度的信号 1.3 信号概念 1.4 信号处理常见方式概览 2.产生信号 2.1 通过终端按键…

Redis 源码学习记录:集合 (set)

无序集合 Redis 源码版本&#xff1a;Redis-6.0.9&#xff0c;本篇文章无序集合的代码均在 intset.h / intset.c 文件中。 Redis 通常使用字典结构保存用户集合数据&#xff0c;字典键存储集合元素&#xff0c;字典值为空。如果一个集合全是整数&#xff0c;则使用字典国语浪费…

Python爬虫:爬取B站视频(最新、能用且讲解详细)【01】

&#x1f4da;博客主页&#xff1a;knighthood2001 ✨公众号&#xff1a;认知up吧 &#xff08;目前正在带领大家一起提升认知&#xff0c;感兴趣可以来围观一下&#xff09; &#x1f383;知识星球&#xff1a;【认知up吧|成长|副业】介绍 ❤️如遇文章付费&#xff0c;可先看…

各位数字和-第13届蓝桥杯选拔赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第72讲。 各位数字和&#…

超简单白话文机器学习 - 回归树树剪枝(含算法介绍,公式,源代码实现以及调包实现)

1. 回归树 1.1 算法介绍 大家看到这篇文章时想必已经对树这个概念已经有基础了&#xff0c;如果不是很了解的朋友可以看看笔者的这篇文章&#xff1a; 超简单白话文机器学习-决策树算法全解&#xff08;含算法介绍&#xff0c;公式&#xff0c;源代码实现以及调包实现&#x…

软件设计师备考笔记(十):网络与信息安全基础知识

文章目录 一、网络概述二、网络互连硬件&#xff08;一&#xff09;网络的设备&#xff08;二&#xff09;网络的传输介质&#xff08;三&#xff09;组建网络 三、网络协议与标准&#xff08;一&#xff09;网络的标准与协议&#xff08;二&#xff09;TCP/IP协议簇 四、Inter…