AgGrid 组件封装设计笔记:自定义 icon 以及每个 icon 的点击事件处理
文章目录
- 问题
- 目前解决效果 v1
- 思路
- 目前解决效果 v0
- 思路
- 代码
- V1
问题
自己封装的 AgGrid
如何自定义传递 icon
,以及点击事件的处理?
目前解决效果 v1
思路
目前解决效果 v0
思路
一张图片说明一下
代码
V1
父组件使用
<template><MyPageLayout @handleSearch="handleSearch"><MyAgGrid :columnDefs="grid.columnDefs" :rowData="grid.rowData" :gridOptions="grid.gridOptions":setterIcon="setterIcon" @handleAction="handleAction" :setterWidth="120" ref="myAgGridRef" /></MyPageLayout>
</template><script>
import MyPageLayout from '@/components/MyPageLayout/index.vue'
import MyAgGrid from '@/components/MyAgGrid/index_v1.vue'
import svgComponent from './svgComponent.vue'export default {name: 'classOfSilo',components: {MyPageLayout,MyAgGrid,},data() {return {setterIcon: [{ icon: `<span>1</span>`, tip: 'html' },{ icon: svgComponent, tip: 'component' },{ icon: 'el-icon-eleme', tip: '11' },{ icon: 'el-icon-s-tools', tip: '22' },{ icon: 'el-icon-phone', tip: '33' },],};},
}
</script>
svgComponent
<template><img :src="findsvg" class="find-svg" />
</template><script>
import findsvg from '@/assets/erp-icons/find-replace.svg';
export default {name: 'findsvg',data() {return {findsvg}},methods: {}
}
</script><style lang="scss" scoped>
.find-svg {width: 16px;height: 16px;cursor: pointer;position: relative;top: -2px;
}
</style>
二次封装 MyAgGrid
<template><AgGridVue :style="myStyle" :class="theme" :columnDefs="mergedColumnDefs" :rowData="rowData":gridOptions="mergedGridOptions" @grid-ready="onGridReady"></AgGridVue>
</template><script>
import { AgGridVue } from "@ag-grid-community/vue";
import { ModuleRegistry } from '@ag-grid-community/core';
import { AG_GRID_LOCALE_CN } from '@ag-grid-community/locale';
import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import Setter from '@/components/MyAgGrid/components/Setter.vue'ModuleRegistry.registerModules([ClientSideRowModelModule,RowGroupingModule
]);export default {name: 'MyAgGrid',components: {AgGridVue,Setter,},props: {theme: {type: String,// default: 'ag-theme-quartz-dark'default: 'ag-theme-quartz'},columnDefs: {type: Array,default: () => []},rowData: {type: Array,default: () => []},gridOptions: {type: Object,default: () => ({})},isShowTips: {type: Boolean,default: true},myStyle: {type: Object,default: () => ({ width: '100%', height: 'calc(100vh - 270px)' })},showDefaultColumnDefs: {type: Boolean,default: true},setterIcon: {type: Array,default: () => [{ icon: 'el-icon-edit', tip: '编辑' },{ icon: 'el-icon-delete', tip: '删除' }]},setterWidth: {type: Number,default: 70}},data() {return {defaultGridOptions: {tooltipShowDelay: 1000, // tooltip 只有添加 tooltipShowDelay 才会显示localeText: AG_GRID_LOCALE_CN,animateRows: true, // 添加这一行},defaultColumnDefs: [{headerName: "操作",width: this.setterWidth,field: "setter",pinned: 'right',cellRenderer: 'Setter',cellRendererParams: {isShowTips: this.isShowTips,setterIcon: this.setterIcon,actionHandler: this.handleAction, // 传递点击处理方法},resizable: true}],gridApi: null}},computed: {mergedGridOptions() {return { ...this.defaultGridOptions, ...this.gridOptions };},mergedColumnDefs() {if (this.showDefaultColumnDefs == false) {return [...this.columnDefs]}return [...this.defaultColumnDefs, ...this.columnDefs];}},methods: {getGridApi() {return this.gridApi},onGridReady(params) {this.gridApi = params.api},handleAction(index, rowData) {this.$emit('handleAction', index, rowData)},},
}
</script><style scoped lang="scss">
::v-deep .ag-pinned-right-header {// margin-right: 16px;.ag-header-row-column {padding-right: 16px;}
}::v-deep .ag-pinned-left-header {border-right: none;
}::v-deep .ag-pinned-right-cols-container {margin-right: 0 !important;
}::v-deep .ag-center-cols-container {margin-right: 0 !important;
}/deep/ .ag-root-wrapper {border-radius: 0;
}
</style>
Setter.vue
<template><div class="setter"><template v-for="(item, index) in iconList"><el-tooltip v-if="isShowTips" class="item" effect="light" :content="item.tip" placement="bottom-start":key="`icon-${index}`"><RenderIcon :icon="item.icon" class="icon-wrapper" @click.native="clickIcon(index)" /></el-tooltip><RenderIcon v-else :icon="item.icon" class="icon-wrapper" @click.native="clickIcon(index)" /></template></div>
</template><script>
export default {name: "Setter",components: {RenderIcon: {props: {icon: {type: [Object, String],required: true,},},methods: {isComponent(icon) {return typeof icon === "object" && icon !== null && typeof icon.render === "function";},isHtmlTag(icon) {const htmlTagRegex = /^<([a-zA-Z][a-zA-Z0-9]*)\b[^>]*>(.*?)<\/\1>$/;return typeof icon === "string" && htmlTagRegex.test(icon);},},render(h) {const { icon } = this;if (this.isComponent(icon)) {return h(icon, { class: "mr6" });} else if (this.isHtmlTag(icon)) {return h("span", { domProps: { innerHTML: icon }, class: "mr6" });} else {return h("i", { class: `mr6 ${icon}` });}},},},computed: {iconList() {return this.params.setterIcon;},isShowTips() {return this.params.isShowTips;},},methods: {clickIcon(index) {this.params.actionHandler(index, this.params.data);},},
};
</script><style lang="scss" scoped>
.mr6 {margin-right: 6px;
}.icon-wrapper {cursor: pointer;
}
</style>
相关文章:

AgGrid 组件封装设计笔记:自定义 icon 以及每个 icon 的点击事件处理
文章目录 问题目前解决效果 v1思路 目前解决效果 v0思路 代码V1 问题 自己封装的 AgGrid 如何自定义传递 icon ,以及点击事件的处理? 目前解决效果 v1 思路 目前解决效果 v0 思路 一张图片说明一下 代码 V1 父组件使用 <template><MyPageL…...
vb.net常用命名空间
.NET的命名空间分为两个主要部分。一个是与微软程序语言相关的microsoft,一个是与操作系统相关的system,其中system主要分为应用程序类的命名空间和WEB程序类的命名空间两部分。 下面是常见的命名空间: Microsoft.VisualBasic 包含VB.NET的RUNTIME和编译运行VB程序…...
Netty面试内容整理-Netty 工作原理
Netty 的工作原理主要基于异步、事件驱动的 I/O 模型,结合 Reactor 多线程模式和高效内存管理来实现高并发网络通信。以下是 Netty 的工作原理详细解析: Reactor 线程模型 Netty 基于 Reactor 模式 来处理并发连接和 I/O 操作,主要分为 单线程模型、多线程模型 和 主从多线程…...

CMD 介绍
CMD 介绍 CMD 是 Windows 操作系统中的命令提示符(Command Prompt)程序,它是一种命令行工具,可以让用户通过键入命令来与计算机进行交互。 DOS: disk operating system, 磁盘操作系统. 是利用命令行来操作计算机. DOS 不是 CMD…...

【项目日记】仿mudou的高并发服务器 --- 实现HTTP服务器
对于生命,你不妨大胆一点, 因为我们始终要失去它。 --- 尼采 --- ✨✨✨项目地址在这里 ✨✨✨ ✨✨✨https://gitee.com/penggli_2_0/TcpServer✨✨✨ 仿mudou的高并发服务器 1 前言2 Util工具类3 HTTP协议3.1 HTTP请求3.2 HTTP应答 4 上下文解析模块…...
Android 使用TabLayout + ViewPager2 实现标签页的视图切换
学习笔记 步骤概览 添加依赖创建布局文件创建 ViewPager2 适配器设置 TabLayout 和 ViewPager2 的联动自定义每个页面内容(Fragment)自定义 TabLayout 样式(可选) 1. 添加依赖 首先,你需要在 build.gradle 文件中添…...
vue 项目实现阻止浏览器记住密码
在各个浏览器中,登录输入密码一般都会弹出是否记住密码的功能,如果记住之后,会在各个密码框自动填充记住的密码,这无疑是一种不安全的操作,所以要实现禁用阻止浏览器记住密码的行为 查阅资料,也得到很多…...

7. 一分钟读懂“单例模式”
7.1 模式介绍 单例模式就像公司里的 打印机队列管理系统,无论有多少员工提交打印任务,大家的请求都汇总到唯一的打印管理中心,按顺序排队输出。这个中心必须全局唯一,避免多个队列出现资源冲突,保证打印任务井然有序。…...

28个炫酷的纯CSS特效动画示例(含源代码)
CSS是网页的三驾马车之一,是对页面布局的总管家,2024年了,这里列出28个超级炫酷的纯CSS动画示例,让您的网站更加炫目多彩。 文章目录 1. 涌动的弹簧效果2. 超逼真的3D篮球弹跳,含挤压弹起模态3. 鼠标放div上࿰…...
百问FB网络编程 - 主要函数介绍
6.3 网络编程主要函数介绍 下面全部函数的头文件都是 #include <sys/types.h> #include <sys/socket.h>6.3.1 socket函数 int socket(int domain, int type,int protocol);此函数用于创建一个套接字。 domain是网络程序所在的主机采用的通讯协族(AF_UNIX和AF_I…...

Unity类银河战士恶魔城学习总结(P155 More example on audio effects更多的音效细节)
【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址:https://www.udemy.com/course/2d-rpg-alexdev/ 本章节添加了更多的音效细节 音频管理器 AudioManager.cs 使得多个音效可以同时播放,注释掉以下代码 public void PlaySFX(in…...

【题解】—— LeetCode一周小结48
🌟欢迎来到 我的博客 —— 探索技术的无限可能! 🌟博客的简介(文章目录) 【题解】—— 每日一道题目栏 上接:【题解】—— LeetCode一周小结47 25.网络延迟时间 题目链接:743. 网络延迟时间 …...

040集——CAD中放烟花(CAD—C#二次开发入门)
效果如下: 单一颜色的烟花: 渐变色的火花: namespace AcTools {public class HH{public static TransientManager tm TransientManager.CurrentTransientManager;public static Random rand new Random();public static Vector3D G new V…...

一文理解多模态大语言模型——下
作者:Sebastian Raschka 博士, 翻译:张晶,Linux Fundation APAC Open Source Evangelist 编者按:本文并不是逐字逐句翻译,而是以更有利于中文读者理解的目标,做了删减、重构和意译,…...

ROS2创建 base 包用于其他模块的参数配置和头文件依赖
Demo 背景 ROS2项目开发中存在以下需求:有多个包需要读取一些共同的配置项(以txt或者yaml形式存在),且依赖于一些公用的utils工具代码(C)。Solution: 创建一个 base_config 包来“存放” 配置文件和公用的头文件。gitee address: Gitee/CDal…...

自然语言处理期末试题汇总
建议自己做,写完再来对答案。答案可能存在极小部分错误,不保证一定正确。 一、选择题 1-10、C A D B D B C D A A 11-20、A A A C A B D B B A 21-30、B C C D D A C A C B 31-40、B B B C D A B B A A 41-50、B D B C A B B B B C 51-60、A D D …...
前端热门面试题目(四)——计算机网路篇
计算机网络常见面试题: 计算机网络面试(一) 计算机网络面试(二) 计算机网络速成: 计算机网络速成一 计算机网络速成二 计算机网络速成三 2. HTTP 1.0 和 2.0 的区别 连接复用: HTTP/1.0 使用短连…...
kubenetes流水线实施清单
整体实施方案概述 创建命名空间(Namespace):创建一个专用于 CI/CD 的命名空间 cicd。配置 Secrets: Git SSH 密钥(分别为 Maven 和 npm 项目)Docker Registry 凭证(Kaniko)SMTP 凭证…...

Redis4——持久化与集群
Redis4——持久化与集群 本文讲述了1.redis在内存占用达到限制后的key值淘汰策略;2.redis主从复制原理;3.redis的哨兵模式;4.redis集群模式。 1. 淘汰策略 设置过期时间 expire key <timeout>只能对主hash表中的键设置过期时间。 查…...

【LeetCode: 94. 二叉树的中序遍历 + 栈】
🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
leetcodeSQL解题:3564. 季节性销售分析
leetcodeSQL解题:3564. 季节性销售分析 题目: 表:sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程:首先由HR先筛选一部分简历后,在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如:Boss直聘(招聘方平台) 直接按照条件进行筛选 例如:…...
ip子接口配置及删除
配置永久生效的子接口,2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...

使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式(本地调用) SSE模式(远程调用) 4. 注册工具提…...