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

news2024/9/29 9:25:47

效果图

在使用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.coloradmin.cn/o/1473168.html

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

相关文章

python爬虫实战:获取电子邮件和联系人信息

引言 在数字时代&#xff0c;电子邮件和联系人信息成为了许多企业和个人重要的资源&#xff0c;在本文中&#xff0c;我们将探讨如何使用Python爬虫从网页中提取电子邮件和联系人信息&#xff0c;并附上示例代码。 目录 引言 二、准备工作 你可以使用以下命令来安装这些库&a…

【笔记】深度学习入门:基于Python的理论与实现(二)

神经网络的学习&#xff08;神经网络的学习阶段&#xff0c;不是我们学习神经网络&#xff09; 从数据中学习 训练数据和测试数据 机器学习中&#xff0c;一般将数据分为训练数据和测试数据两部分来进行学习和 实验等。首先&#xff0c;使用训练数据进行学习&#xff0c;寻找最…

SQL进阶(三):Join 小技巧:提升数据的处理速度

复杂数据结构处理&#xff1a;Join 小技巧&#xff1a;提升数据的处理速度 本文是在原本sql闯关的基础上总结得来&#xff0c;加入了自己的理解以及疑问解答&#xff08;by GPT4&#xff09; 原活动链接 用到的数据&#xff1a;链接 提取码&#xff1a;l03e 目录 1. 课前小问…

C++笔记之执行一个可执行文件时指定动态库所存放的文件夹lib的路径

C++笔记之执行一个可执行文件时指定动态库所存放的文件夹lib的路径 参考博文: 1.C++笔记之执行一个可执行文件时指定动态库所存放的文件夹lib的路径 2.Linux笔记之LD_LIBRARY_PATH详解 3.qt-C++笔记之使用QProcess去执行一个可执行文件时指定动态库所存放的文件夹lib的路径 c…

React PureComponent 和 React.memo()区别

1 注意 ● PureComponent和memo仅作为性能优化的方式存在 ● 不要依赖它来阻止渲染&#xff0c;会产生BUG ● PureComponnet 和memo 都是通过对 props 值的浅比较来决定该组件是否需要更新的。 2 PureComponent 和React.memo() 区别 PureComponent 和React.memo()都是React优化…

Sora专辑|AI界一夜变天

没有丝毫预热和剧透,Open AI深夜直接丢下核弹炸了街,从业者深感要变天。 2月16日凌晨,Open AI发布了首个“文生视频”模型Sora。官方介绍,Sora能根据文字指令创造出包含丰富细节的逼真场景、角色,且能用多角度镜头,生成一镜到底的60秒长视频。 目前官网上已经更新了48个…

python Matplotlib Tkinter-->导出pdf报表

环境 python:python-3.12.0-amd64 包: matplotlib 3.8.2 reportlab 4.0.9 import matplotlib.pyplot as plt from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, NavigationToolbar2Tk import tkinter as tk import tkinter.messagebox as messagebox impor…

【java-集合框架】ArrayList类

&#x1f4e2;java基础语法&#xff0c;集合框架是什么&#xff1f;顺序表的底层模拟实现都是看本篇前的基础必会内容&#xff0c;本篇不再赘述&#xff0c;详情见评论区文章。 &#x1f4e2;编程环境&#xff1a;idea 【java-集合框架】ArrayList类 1. 先回忆一下java代码中常…

Facebook Messenger链接分享:如何创建链接并设置自动化内容

Facebook Messenger链接是指基于Facebook用户名创建的会话链接&#xff0c;用户可以在其Facebook页面的设置部分复制此链接进行分享。然后将该链接直接粘贴到独立站、电子邮件、名片或社交媒体中&#xff0c;让目标受众可以一键进入对话。为了满足某些商家的需求&#xff0c;Fa…

Qt QWidget 简约美观的加载动画 第五季 - 小方块风格

给大家分享两个小方块风格的加载动画 &#x1f60a; 第五季来啦 &#x1f60a; 效果如下: 一个三个文件,可以直接编译运行 //main.cpp #include "LoadingAnimWidget.h" #include <QApplication> #include <QGridLayout> int main(int argc, char *arg…

时间序列分析实战(四):Holt-Winters建模及预测

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

C++ //练习 9.24 编写程序,分别使用at、下标运算符、front和begin提取一个vector中的第一个元素。在一个空vector上测是你的程序。

C Primer&#xff08;第5版&#xff09; 练习 9.24 练习 9.24 编写程序&#xff0c;分别使用at、下标运算符、front和begin提取一个vector中的第一个元素。在一个空vector上测是你的程序。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;v…

详解POCV/SOCV的时序报告

​POCV/SOCV的时序报告中有如下变量&#xff1a; Mean: 高斯分布中的μ值&#xff08;平均值&#xff09; Sensit: sensitivity&#xff0c;也就是1个Sigma的值&#xff1b; Corner: Sigma边界的最差值 cell的delay Delay mean N * Delay sigma; cell 的Transition Sl…

UE5 C++ Widget练习 Button 和 ProgressBar创建血条

一. 1.C创建一个继承Widget类的子类&#xff0c; 命名为MyUserWidget 2.加上Button 和 UserWidget的头文件 #include "CoreMinimal.h" #include "Components/Button.h" #include "Blueprint/UserWidget.h" #include "MyUserWidget.genera…

OpenCV 16 - Qt使用opencv视觉库

1 下载好opencv视觉库 不知道怎么下载和编译opencv视觉库的可以直接使用这个 : opencvcv_3.4.2_qt 2 解压opencv包 3 打开opencv的安装目录 4.打开x86/bin 复制里面所有的dll文件&#xff0c;黏贴到C/windows/syswow64里面 5 新建Qt项目 6 修改pro文件:添加对应的头文件和库文件…

【HMAC-SHA1算法以及工作原理】

曾梦想执剑走天涯&#xff0c;我是程序猿【AK】 目录 简述概要知识图谱总结 简述概要 连接HMAC-SHA1工作原理以及工具代码 知识图谱 HMAC&#xff08;Hash-based Message Authentication Code&#xff0c;基于散列的消息认证码&#xff09;是一种结合了密钥和消息的认证方法…

Python算法题集_全排列

Python算法题集_全排列 题46&#xff1a;全排列1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【标记数组递归】2) 改进版一【指针递归】3) 改进版二【高效迭代模块】4) 改进版三【高效迭代模块极简代码】 4. 最优算法5. 相关资源 本文为Python…

【GPTs分享】每日GPTs分享之Image Generator Tool

今日GPTs分享&#xff1a;Image Generator Tool。Image Generator Tool是一种基于人工智能的创意辅助工具&#xff0c;专门设计用于根据文字描述生成图像。这款工具结合了专业性与友好性&#xff0c;鼓励用户发挥创造力&#xff0c;同时提供高效且富有成效的交互体验。 主要功能…

【新书推荐】8.1 数组

第八章 数组 数组是程序设计中最常用的数据类型之一。数组表示在指定的内存地址处&#xff0c;连续存储具有相同数据类型的一组元素。每个数组元素可以视为一个单独的变量&#xff0c;使用数组名和数组下标来表示。例如int类型的数组元素a[2]&#xff0c;表示在内存地址a处&am…

input输入框过滤非金额内容保留一个小数点和2位小数

这篇是输入框过滤非金额内容保留一个小数点和2位小数&#xff0c;金额的其他格式化可以看这篇文章常用的金额数字的格式化方法 js方法直接使用 该方式可以直接使用过滤内容&#xff0c;也可以到onInput或onblur等地方过滤&#xff0c;自行使用 /*** 非金额字符格式化处理* p…