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.hqwc.cn/news/494031.html

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

相关文章

主从复制实现Redis集群

主从复制实现Redis集群实验 (一主二从): 实验环境: 使用Docker 搭建 Redis 版本 5.0.5 打开一个终端窗口&#xff0c;在其中运行如下命令创建一个名为redis-master的Redis容器。注意&#xff0c;它的端口是6379 (本地的端口:映射到容器的端口) docker run -itd--name redis-m…

SpringMVC(1)

目录 SpringMVC简介入门案例启动服务器初始化过程单次请求过程bean加载控制 PostMan请求与响应设置请求映射路径请求参数五种类型参数传递JSON数据日期类型参数传递响应 RestRest 简介RESTful快速开发 SpringMVC是隶属于Spring框架的一部分&#xff0c;主要是用来进行Web开发&a…

嵌入式学习第二十一天!(线程)

线程&#xff1a; 1. 基本概念&#xff1a; 线程&#xff1a;线程是一个轻量级的进程&#xff0c;位于进程空间内部&#xff0c;一个进程中可以创建多个线程 2. 线程创建&#xff1a; 线程独占栈空间&#xff0c;文本段、数据段和堆区与进程共享 3. 线程调度&#xff1a; 与进程…

【Java EE初阶二十五】简单的表白墙(一)

1. 前端部分 1.1 前端代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"wid…

vue2中的render函数和vue3中的区别

一、vue2中关于render的地址如下&#xff1a; 官网关于render描述的链接 源码如下&#xff1a; render?(this: undefined, createElement: CreateElement, context: RenderContext<Props>): VNode | VNode[];解释&#xff1a; vue2中第一个参数是h&#xff08;其实就是…

kubectl使用及源码阅读

目录 概述实践样例yaml 中的必须字段 kubectl 代码原理kubectl 命令行设置pprof 抓取火焰图kubectl 中的 cobra 七大分组命令kubectl createcreateCmd中的builder模式createCmd中的visitor访问者模式外层VisitorFunc分析 结束 概述 k8s 版本 v1.24.16 kubectl的职责 1.主要的…

【Flutter/Android】新建项目,打开android 目录,报错红色以及开启 MultiDex 配置

1 报错红色问题。 单独打开 Flutter 项目下的 android 项目即可。 也就是说&#xff0c;你要一部分原生代码开发&#xff0c;你就需要自己把 android 项目单独出去做&#xff08;其实就相当于android 项目引用 Flutter的dart部分&#xff09;。也就是说&#xff0c;在 Flutter…

时间序列分析实战(六):ARIMA乘法(疏系数)模型建模及预测

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…

紫外-可见吸收光谱法(UV-Vis)是最常用吸收光谱技术 市场持续扩大

紫外-可见吸收光谱法&#xff08;UV-Vis&#xff09;是最常用吸收光谱技术 市场持续扩大 紫外-可见吸收光谱法&#xff0c;也称为紫外-可见分光光度法&#xff0c;简称UV-Vis&#xff0c;利用样品分子在紫外和可见光激发下产生电子能级跃迁形成的吸收光谱&#xff0c;对元素进行…

【lv14 day10内核模块参数传递和依赖】

一、模块传参 module_param(name,type,perm);//将指定的全局变量设置成模块参数 /* name:全局变量名 type&#xff1a; 使用符号 实际类型 传参方式 bool bool insmod xxx.ko 变量名0 或 1 invbool bool insmod xxx.ko 变量名0 或 1 charp char * insmod xxx.ko 变量名“字符串…

Sora - 真正单兵作战时代来临了

一、 OpenAI Sora 视频生成模型技术报告总结 不管是在视频的保真度、长度、稳定性、一致性、分辨率、文字理解等方面&#xff0c;Sora都做到了SOTA&#xff08;当前最优&#xff09;。 技术细节写得比较泛&#xff08;防止别人模仿&#xff09;大概就是用视觉块编码&#xff08…

Java数据结构----时间和空间复杂度

目录 1.算法效率 2.时间复杂度 2.1 时间复杂度的概念 2.2 大O的渐进表示法 2.3 推导大O阶方法 3.4 常见时间复杂度计算举例 3.空间复杂度 1.算法效率 算法效率分析分为两种&#xff1a;第一种是时间效率&#xff0c;第二种是空间效率。时间效率被称为时间复杂度&#xf…