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&…

提升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…

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

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

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

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

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

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

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

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

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;对人工智能感兴趣的小伙伴快来看看吧…

uniapp+express前后端小程序获取头像和昵称和code,openid,小程序授权登陆最新教程

目录 0总体思路0.1前端实现&#xff1a;0.2如何阻拦一些页面必须要登陆才能进去呢&#xff1f;0.3后端实现 1.首页2.个人中心页3.授权登陆页3.1.获取微信头像和微信昵称3.1.1官方教程3.1.2实际实现 3.2.获取头像和昵称之后去获取code小程序授权登陆3.3登陆页的整体代码&#xf…

【Leetcode每日一题】二分查找 - 寻找峰值(难度⭐⭐)(20)

1. 题目解析 Leetcode链接&#xff1a;162. 寻找峰值 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 核心在于找到题目中所说的峰值并返回他们的下标即可。 2. 算法原理 分析峰顶及其两旁数据的特点 峰顶数据特点&#xff1a;峰…

windows 11+docker desktop+grafana+influxDB+python写入

下载安装docker desktop 出现WSL相关的错误。WSL是一个linux内核的子系统&#xff0c;docker是基于linux内核的&#xff0c;所以运行docker需要WSL。 以管理员权限打开powershell&#xff0c;查看WSL状态 wsl --status 我遇到的错误是因为我关闭了windows的某些更新 执行上…

Android自定义View实现数字密码锁

最近项目上用到一个密码加锁功能&#xff0c;需要一个数字密码界面&#xff0c;就想着封装成一个View来方便管理和使用。 废话不多说&#xff0c;先上最终效果图&#xff1a; 思路 整体可分为2个部分来实现&#xff0c;1.顶部是4个密码位的填充&#xff1b;2.数字键盘部分。整…

VUE基础知识九 ElementUI项目

ElementUI官网 一 项目 最终完成的效果&#xff1a; 切换上边的不同按钮&#xff0c;下方显示不同的表格数据 在src/components下新建不同业务组件的文件夹 1.1 搭建项目 使用脚手架搭建项目后&#xff0c;引入ElementUI&#xff08;搭建、引入ElementUI步骤在第七节里已…

旧衣服回收小程序开发:企业、创业者收益新模式

近年来&#xff0c;我国旧衣回收行业发展迅速。随着大众对衣物的更新需求增加&#xff0c;闲置衣物便也不断增加&#xff0c;我国的旧衣回收行业的市场规模随之增加。 当下&#xff0c;旧衣回收产业链较为完善&#xff0c;主要以出口为主&#xff0c;回收利润较高。与其他行业…

【Pytorch深度学习开发实践学习】Pytorch实现LeNet神经网络(1)

1.model.py import torch.nn as nn import torch.nn.functional as F引入pytorch的两个模块 关于这两个模块的作用&#xff0c;可以参考下面 Pytorch官方文档 torch.nn包含了构成计算图的基本模块 torch,nn.function包括了计算图中的各种主要函数&#xff0c;包括&#…