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.mfbz.cn/a/412366.html

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

相关文章

【高德地图】Android高德地图控件交互详细介绍

&#x1f4d6;第5章 与地图控件交互 ✅控件交互&#x1f9ca;缩放按钮&#x1f9ca;指南针&#x1f9ca;定位按钮&#x1f9ca;地图Logo ✅手势交互&#x1f9ca;缩放手势&#x1f9ca;滑动手势&#x1f9ca;旋转手势&#x1f9ca;倾斜手势&#x1f9ca;指定屏幕中心点的手势操…

Facebook的虚拟社交愿景:元宇宙时代的新起点

在当今数字化时代&#xff0c;社交媒体已经成为人们生活中不可或缺的一部分。而随着科技的不断进步和社会的发展&#xff0c;元宇宙已经成为了人们关注的热点话题之一。作为社交媒体的领军企业之一&#xff0c;Facebook也在积极探索虚拟社交的未来&#xff0c;将其视为元宇宙时…

社交媒体变革者:剖析Facebook对在线互动的贡献

随着数字化时代的蓬勃发展&#xff0c;社交媒体已经成为人们日常生活中不可或缺的一部分。在这个领域的发展中&#xff0c;Facebook作为先行者和领导者&#xff0c;对在线互动的演变和发展产生了深远的影响。本文将深入剖析Facebook在社交媒体领域的贡献&#xff0c;以及它对在…

贪心算法(算法竞赛、蓝桥杯)--排队接水问题

1、B站视频链接&#xff1a;A25 贪心算法 P1223 排队接水_哔哩哔哩_bilibili 题目链接&#xff1a;排队接水 - 洛谷 #include <bits/stdc.h> using namespace std; struct node{int t,id;//接水时间&#xff0c;编号bool operator<(node &b){return t<b.t;} …

2024-02-23(Spark)

1.RDD的数据是过程数据 RDD之间进行相互迭代计算&#xff08;Transaction的转换&#xff09;&#xff0c;当执行开启后&#xff0c;代表老RDD的消失 RDD的数据是过程数据&#xff0c;只在处理的过程中存在&#xff0c;一旦处理完成&#xff0c;就不见了。 这个特性可以最大化…

Lua速成(2)

一、流程控制 Lua 编程语言流程控制语句通过程序设定一个或多个条件语句来设定。在条件为 true 时执行指定程序代码&#xff0c;在条件为 false 时执行其他指定代码。 控制结构的条件表达式结果可以是任何值&#xff0c;Lua认为false和nil为假&#xff0c;true和非nil为真。 …

NOIP2018-J-4-对称二叉树的题解

原题描述&#xff1a; 题目描述 时间&#xff1a;1s 空间&#xff1a;256M 一棵有点权的有根树如果满足以下条件&#xff0c;则被轩轩称为对称二叉树&#xff1a; 1. 二叉树&#xff1b; 2. 将这棵树所有节点的左右子树交换&#xff0c;新树和原树对应位置的结构相同且…

WinForms中的Timer探究:Form Timer与Thread Timer的差异

WinForms中的Timer探究&#xff1a;Form Timer与Thread Timer的差异 在Windows Forms&#xff08;WinForms&#xff09;应用程序开发中&#xff0c;定时器&#xff08;Timer&#xff09;是一个常用的组件&#xff0c;它允许我们执行定时任务&#xff0c;如界面更新、周期性数据…

QT之项目经验(windows下的sqlite,c++开发)

目录 一、需要时间去磨练gui的调整和优化 1. 借鉴网上开源项目学习 2. gui的布局及调整是磨人的一件事情 3. gui的布局也是可以用组件复刻的 4. 耗时的设备树 二、多线程异步弹窗 三、定时任务动态变更设定 1.确定按钮触发 2.此处监听定时任务时间的改变 3.此处对改变做出具…

Vue 实现页面导出A4标准大小的PDF文件,以及处理图片跨域不能正常展示的问题等

效果预览&#xff1a; 代码流程&#xff1a;首先在utils文件夹下创建htmlToPdf的js工具文件&#xff0c;然后在main.js中注册引用 htmlToPdf.js // 导出页面为PDF格式 import html2Canvas from html2canvas import JsPDF from jspdfexport default {install(Vue, options) {V…

vscode输入英文时字体之间的间隔突然变大,似中文

vscode输入英文时字体之间的间隔突然变大&#xff0c;似中文 主要原因&#xff1a; 是由于输入法变成全角模式了。原因可能是不小心按了 shift空格键快捷键造成的。 正常情况&#xff0c;全角就是字母和数字等与汉字占等宽位置的字。 半角就是ASCII方式的字符&#xff0c;在没…

3、函数定义,函数调用,this指向总结,闭包

一、函数的定义方式 1、函数声明 function demo1() {var num 12var result Math.pow(num,2)//指数函数return result }2、函数表达式 var demo2 function (x,y) { //内置对象arguments前面的两个参数 是 x,yvar sum arguments[0] arguments[1]console.log(sum) }3、构…

stm32用CubeMX库控制OLED显示数字,单个字符,字符串

首先是打开proteus绘制电路图&#xff1a; 接着就是打开CubeMX软件&#xff0c;配置晶振和GPIO口&#xff1a; 接下来就用前面讲过的方法添加一个自己的代码文件夹和代码了&#xff1a; 下面是OLED.c文件&#xff0c;复制就能用&#xff1a; #include "OLED_Font.h"…

如何优化一个看似正常的数据库

通常DBA是不会太了解业务逻辑的&#xff0c;遇到系统中劣质的sql 一般也是以通过添加索引的方式来优化&#xff0c;但是并不是所有的sql都能通过添加索引来优化 这就需要重sql的本身来做分析&#xff0c;另外还要了解什么样的语句会不走索引&#xff01;本文通过几个简单的例子…

再见,Visual Basic——曾经风靡一时的编程语言

2020年3月&#xff0c;微软团队宣布了对Visual Basic&#xff08;VB&#xff09;的“终审判决”&#xff1a;不再进行开发或增加新功能。这意味着曾经风光无限的VB正式退出了历史舞台。 VB是微软推出的首款可视化编程软件&#xff0c;自1991年问世以来&#xff0c;便受到了广大…

不只是数字游戏:六西格玛培训让数据讲述餐厅故事

随着时代的进步和科技的发展&#xff0c;人们对食品安全、健康以及就餐体验的要求日趋增高。这些因素推动了餐饮服务行业不断向前演进&#xff0c;以顺应消费者的多变需求。在2024年&#xff0c;这一行业预计将继续经历创新和变化&#xff0c;其中包括对运营效率的持续改进、对…

状态机-----

1.原理 同步的意思就是状态的跳转都是在时钟的作用下跳转的&#xff0c;有限是指状态机中状态的个数是有限的。两种状态机的共同点都是状态的跳转只和输入有关&#xff0c;区别就是如果最后的输出只和当前状态有关而与输入无关&#xff0c;则是moore型状态机。如果最后的输出不…

VUE基础知识九 ElementUI项目

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

如何让网页APP化 渐进式Web应用(PWA)

前言 大家上网应该发现有的网页说可以安装对应应用&#xff0c;结果这个应用好像就是个web&#xff0c;不像是应用&#xff0c;因为这里采用了PWA相关技术。 PWA&#xff0c;全称为渐进式Web应用&#xff08;Progressive Web Apps&#xff09;&#xff0c;是一种可以提供类似…

索引使用规则1——最左前缀法则

这篇文章主要介绍索引的使用规则——最左前缀法则&#xff0c;关于索引的效率&#xff0c;可以查看上一篇文章索引的有效性 最左前缀法则&#xff1a;索引使用了复合索引&#xff0c;也就是联合索引&#xff0c;使用一个索引名称索引了好几个字段。在这类索引中需要遵守最左前…