naive-ui-admin BasicTable 列表操作栏显示图标icon

效果图

在使用BasicTable的页面添加引用,这里随便弄了个icon

import { GameController } from "@vicons/ionicons5"

 自定义列

const actionColumn = reactive({width: 180,title: "操作",key: "action",fixed: "right",render(record: any) {return h(TableAction, {style: "text",actions: [{label: "",icon: GameController,toolTip: "查看",onClick: view.bind(null, record)}]});}
});

 这里label设置为空,icon就是刚刚导入的图标,toolTip是自定义属性,在原来封装好的组件里添加的,不然只有一个图标可能不是很明确。

自定义的如下:

打开components/Table/src/components/TableAction.vue ,修改n-button 里的内容。

<n-button v-bind="action" class="mx-1">{{ action.label }}<template #icon v-if="action.hasOwnProperty('icon')"><n-tooltip trigger="hover"><template #trigger><n-icon :component="action.icon" /></template>{{ action.toolTip }}</n-tooltip></template>
</n-button>

然后组件的props添加toolTip字段

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

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

相关文章

顺丰科技2024届春季校园招聘常见问题解答及SHL测评题库

顺丰科技2024届春季校园招聘常见问题解答及SHL测评题库 Q&#xff1a;顺丰科技2024届校园招聘面向对象是&#xff1f; A&#xff1a;2024届应届毕业生&#xff0c;毕业时间段为2023年10月1日至2024年9月30日&#xff08;不满足以上毕业时间的同学可以关注顺丰科技社会招聘或…

全面介绍HTML的语法!轻松写出网页

文章目录 heading(标题)paragraph(段落)link(超链接)imagemap(映射)table(表格)list(列表)layout(分块)form(表单)更多输入:datalistautocompleteautofocusmultiplenovalidatepatternplaceholderrequired head(首部)titlebaselinkstylemetascriptnoscript iframe HTML&#xff…

备战蓝桥杯---树形DP基础1

我们先来看几个比较简单的例子来引入&#xff1a; 我们令f[i]表示以i为根节点的子树大小&#xff0c;易得状态转移方程为&#xff1a; f[i]1f[son1]....f[soni]; 我们用DFS即可&#xff0c;下面是大致的模板&#xff1a; 让我们来看看几道题吧&#xff1a; 1.贪心树形DPDFS&…

MapGIS农业信息化解决方案(1)

当前,信息化发展水平已经成为衡量一个国家和地区现代化水平和综合实力的重要标志。推进农业信息化,成为正在经历由传统向现代转型的中国农业必须跨越的门槛。连续多年,中央 1 号文件均提出“农业信息化建设”的目标,提出“整合资源,共建平台,健全农村信息服务体系”;在《…

提升Java IO性能!深入掌握FilterOutputStream类!

咦咦咦&#xff0c;各位小可爱&#xff0c;我是你们的好伙伴——bug菌&#xff0c;今天又来给大家普及Java IO相关知识点了&#xff0c;别躲起来啊&#xff0c;听我讲干货还不快点赞&#xff0c;赞多了我就有动力讲得更嗨啦&#xff01;所以呀&#xff0c;养成先点赞后阅读的好…

FX110网:2024年1月六大机构货币现货交易量数据出炉

2024年1月&#xff0c;各主要平台的机构货币现货交易量呈半升半降态势&#xff0c;但降幅超过涨幅&#xff0c;六大交易场所的现货日均货币交易量&#xff08;ADV&#xff09;平均环比为-1.42%。其中&#xff0c;Cboe FX、360T和Saxo Bank环比下跌&#xff1b;Euronext FX、FxS…

计算机网络---物理层疑难点总结

疑难点 1&#xff0e;传输媒体是物理层吗?传输媒体和物理层的主要区别是什么? 传输媒体并不是物理层。由于传输媒体在物理层的下面&#xff0c;而物理层是体系结构的第一层&#xff0c;因此有时称传输媒体为0层。在传输媒体中传输的是信号&#xff0c;但传输媒体并不知道所传…

MySQL中的describe关键字

背景 新建mysql表中需要一个描述的字段&#xff0c;本人就是用的describe&#xff0c;结果mybatis插入报错&#xff0c;去掉这个字段后结果正常 结果 检查代码后&#xff0c;认为代码正常&#xff0c;并且字段编写正确&#xff0c;类型也正确&#xff0c;怀疑是数据库这边的…

2024龙年特别篇 -- 魔法指针 之 二级指针 指针数组

哈喽哈喽&#xff0c;它来咯&#xff0c;它来咯&#xff0c;接下来有白子寰给你讲解:二级指针 指针数组 目录 二级指针 二级指针的介绍 一图 KO 二级指针 二级指针的运算 指针数组 概念 指针数组模拟二维数组 整形指针数组 二级指针 二级指针的介绍 在介绍时&#xff0…

如何使用word制作填空题?

填空题也是一种比较高效的复习方式&#xff0c;大脑记忆的本质就是不断地重复&#xff0c;电脑给了我们一些自己认为不可能的事情&#xff0c;创造了必要的条件。 第一步标注出自己要进行标注的文字 可以选用红色字体对其进行标注&#xff0c;后续的标注就采用F4&#xff08;…

网络安全与IP安全网络安全

网络安全与IP安全网络安全 网络安全 是指网络系统的硬件&#xff0c;软件以及系统中的数据收到的保护。 保护的基本属性为&#xff1a;机密性&#xff0c;身份认证&#xff0c;完整性和可用性&#xff1b; 基本特征&#xff1a;相对性&#xff0c;时效性&#xff0c;相关性…

如何操作系统缓冲区减少了磁盘碎片化?

如何操作系统缓冲区减少了磁盘碎片化&#xff1f; 在探讨操作系统如何通过使用缓冲区来减少磁盘碎片化之前&#xff0c;我们需要先了解什么是磁盘碎片化以及它为什么会对我们的电脑性能造成影响。 磁盘碎片化简介 磁盘碎片化发生在计算机硬盘上存储数据的过程中。简单来说&am…

正码,反码,补码,移码数据表示

数据表示 ◆带符号数有下列编码方式&#xff0c;当真值为-45时: 原码:一个数的正常二进制表示&#xff0c;最高位表示符号&#xff0c;数值 0 的源码有两种形式:0 (00000000&#xff09;和-0 (1 0000000) 。-45对应原码为10101101 反码:正数的反码即原码;负数的反码是在原码的基…

一文解读MES软件为企业带来的五大好处,附功能亮点及应用场景

在当今激烈竞争的市场环境下&#xff0c;企业需要不断提升自身的灵活性和适应能力&#xff0c;以更好地应对各种挑战和变化。而MES软件作为一种重要的信息化工具&#xff0c;可以帮助企业提升生产管理水平&#xff0c;提高效率&#xff0c;实现精细化管理&#xff0c;从而增强企…

Blender中四种不同的几何体类型(网格、曲线、体积和实例 )

网格、曲线、体积和实例是Blender中四种不同的几何体类型。它们各有特点&#xff0c;适用于不同的建模场景。 网格是由顶点、边和面组成的三维对象。它是Blender中最常用的几何体类型&#xff0c;可以用来创建各种模型&#xff0c;例如角色、场景、道具等。 曲线是一维对象&a…

jQuery引入及下载方法

jQuery引入及下载方法 目录 jQuery引入及下载方法【方法1】cdn引入【方法2】下载本地文件 【方法1】cdn引入 直接在head引入jq <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title>&…

【C++】7-12 样本方差

7-12 样本方差 分数 10 全屏浏览 切换布局 作者 ldm 单位 成都信息工程大学 作为概率论随便考100分的你&#xff0c;口算出给定样本的方差自然也不在话下&#xff0c;不过今天需要你编程实现这样的程序。 样本方差&#xff1a;S2n−11​∑i1n​(Xi​−Xˉ)2 样本均值&…

【BUG 记录】史诗级 BUG - MYSQL 删库删表却没有备份如何恢复数据

【BUG 记录】史诗级 BUG - MYSQL 删库删表却没有备份如何恢复数据 1. 问题描述2. 解决方案&#xff08;binlog&#xff09;2.1 构造测试环境2.2 查看 MySQL 环境是否开启 binlog2.3 查看所有的 binlog 日志记录2.4 查看当前正在使用的是哪一个 binlog 文件2.5 查看此时的 binlo…

好书推荐丨AI绘画全面精通:软件平台+脚本文案+设计制作+案例实战

文章目录 写在前面AI绘画推荐图书图书简介本书特色作者简介 推荐理由粉丝福利写在后面 写在前面 本期博主给大家带来了一本全新出版的AI绘画类书籍&#xff0c;《AI绘画全面精通&#xff1a;软件平台脚本文案设计制作案例实战》&#xff0c;对人工智能感兴趣的小伙伴快来看看吧…

etcd java 客户端jetcd库踩坑日志

问题 Q&#xff1a; EtcdException: Unable to resolve endpoints [http://0.0.0.0:2379/] A&#xff1a; 经过测试&#xff0c;endpoints最后的斜杠不能写&#xff0c;完整的endpoints是http://0.0.0.0:2379 Q&#xff1a; java.lang.NoSuchMethodError: io.netty.buffer.Po…