当前位置：首页 > news >正文

AgGrid 组件封装设计笔记：自定义 icon 以及每个 icon 的点击事件处理

news 来源：原创 2025/5/13 0:04:25

文章目录

问题
目前解决效果 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…...

编程日记 2025/5/13 0:04:25

什么是TCP的三次握手

TCP（传输控制协议）的三次握手是一个用于在两个网络通信的计算机之间建立连接的过程。这个过程确保了双方都有能力接收和发送数据，并且初始化双方的序列号。以下是三次握手的详细步骤： 第一次握手（SYN）&…...

编程日记 2025/5/7 23:33:12

ElasticSearch学习记录

服务器操作系统版本：Ubuntu 24.04 Java版本：21 Spring Boot版本：3.3.5 如果打算用GUI，虚拟机安装Ubuntu 24.04，见虚拟机安装Ubuntu 24.04及其常用软件(2024.7)_ubuntu24.04-CSDN博客文章浏览阅读6.6k次&#xff0…...

编程日记 2025/5/7 14:55:32

10.在 Vue 3 中使用 OpenLayers 加载引用 Stamen 地图（多种形式）

在 Web 地图开发中，OpenLayers 是一个非常强大且灵活的 JavaScript 库，它可以帮助我们加载各种地图层（如 OpenStreetMap、Google Maps、Bing Maps 等）。而 Stamen 地图是一个非常常见的地图样式，它提供了多种地图样式&…...

编程日记 2025/5/12 22:47:04

json与proto序列化,反序列化性能对比

1. 说proto快,必须知道他快多少?为什么快? 快多少? // 测试proto序列化和反序列化的性能func BenchmarkProtobufMarshal(b *testing.B) {// 创建一个 Request 对象req : &demo.Request{Ping: "ping",}// 测试序列化的性能b.ResetTimer()for i : 0; i < b…...

编程日记 2025/5/6 19:56:07

[Redis#14] 持久化 | RDB | bgsave | check-rdb | 灾备

目录 0.概述持久化的策略 1 RDB 1.1 触发机制 1.2 流程说明 1.3 RDB 的优缺点 0.概述在学习 MySQL 数据库时，我们了解到事务的四个核心特性：原子性、一致性、持久性和隔离性。这些特性确保了数据库操作的安全性和可靠性。当我们转向 Redis 时&a…...

编程日记 2025/5/12 23:33:28

ubuntu部署RocketMQ

Quick Start RocketMQ 下载解压把下载的文件解压重命名，放在想放的位置需要提前配置JDK环境变量，或者直接在配置文件中指定JAVA_HOME 编辑编辑 rocketmq/bin下的 runserver.sh 和runbroker.sh文件，把内存大小改小一点，因为…...

编程日记 2025/5/8 22:39:41

深入浅出：PHP中的变量与常量全解析

文章目录引言理解变量普通变量赋值操作变量间赋值引用赋值取消引用可变变量预定义变量理解常量声明常量使用define()函数const关键字使用常量预定义常量扩展话题：作用域与生命周期实战案例总结与展望参考资料引言在编程的世界里，变量和常量是两种…...

编程日记 2025/5/9 9:53:44

概率论相关知识随记

作为基础知识的补充，随学随记，方便以后查阅。概率论相关知识随记期望（Expectation）期望的定义离散型随机变量的期望示例：掷骰子的期望连续型随机变量的期望示例：均匀分布的期望期望的性质线性性质期望的…...

编程日记 2025/5/13 0:02:41

gpt-computer-assistant - 极简的 GPT-4o 客户端

更多AI开源软件： AI开源 - 小众AIhttps://www.aiinn.cn/sources gpt-computer-assistant是一个将 ChatGPT MacOS 应用程序提供给 Windows 和 Linux 的替代工作。因此，这是一个全新且稳定的项目。此时，您可以轻松地将其作为 Python 库安装&am…...

编程日记 2025/5/12 23:16:51

【Java开发】Springboot集成mybatis-plus

1、引入 mybatis-plus 依赖 <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.0</version> </dependency>  <dependen…...

编程日记 2025/5/11 14:10:15

本地运行打包好的dist

首先输入打包命令每个人设置不一样一般人是npm run build如果不知道可以去package.json里去看。打包好文件如下命令行输入 :npm i -g http-server 进入到dist目录下输入命令cmd 输入 http-server 成功...

编程日记 2025/5/12 23:24:58

mac安装php和xdebug调试

要在Mac上安装PHP 7.4，你可以通过几种方式来完成，但鉴于PHP7.4官方已不再维护，并且Homebrew默认仓库中不再提供此版本，我们需要从第三方仓库或直接从源代码进行安装。本文以brew方式安装，如果安装的是8.0以上&#xff…...

编程日记 2025/5/12 21:53:15

使用Rufus制作Ubuntu需要注意

‌在使用Rufus制作Ubuntu启动盘并进行BIOS设置时，需要注意以下几点‌： ‌关闭RST（英特尔快速存储技术）‌：在BIOS设置中，如果电脑启用了RST功能，需要将其关闭。因为Ubuntu可能无法检测到硬盘&a…...

编程日记 2025/5/12 8:16:34

2024 阿里云Debian12.8安装apach2【图文讲解】

1. 更新系统，确保您的系统软件包是最新的 sudo apt update sudo apt upgrade -y 2. 安装 Apache Web 服务器 apt install apache2 -y 3. 安装 PHP 及常用的扩展 apt install php libapache2-mod-php -y apt install php-mysql php-xml php-mbstring php-curl php…...

编程日记 2025/5/12 23:20:31

iOS平台接入Facebook登录

1、FB开发者后台注册账户 2、完善App信息 3、git clone库文件代码接入 4、印尼手机卡开热点调试备注： 可能遇到的问题： 1、Cocos2dx新建的项目要更改xcode的git设置，不然卡在clone，无法在线获取FBSDK 2、动态库链接需要在…...

编程日记 2025/5/13 0:02:41

关于在ubuntu上无法运行EasyConnect的解决方法

需要这三个文件 libpangocairo-1.0-0_1.40.14-1_amd64.deb libpangoft2-1.0-0_1.40.14-1_amd64.deb libpango-1.0-0_1.40.14-1_amd64.deb然后执行 cp source /usr/share/sangfor/EasyConnect再重启EasyConnect即可下载链接 http://kr.archive.ubuntu.com/ubuntu/pool/main/…...

编程日记 2025/5/11 3:49:21

常用 Linux 各资源指标监控示例（长期更新）

1、在 linux 中，查看指定进程下各线程运行情况 # ps 方式，查看 pid 为 776 的进程有哪些线程 ps -Tp 776 #> PID SPID TTY TIME CMD #> 776 776 ? 00:00:01 zebra #> 776 778 ? 00:00:00 RCU sweeper #&g…...

编程日记 2025/5/12 23:59:00

【目标跟踪】AntiUAV600数据集详细介绍

AntiUAV600数据集的提出是为了适应真实场景，即无人机可能会随时随地出现和消失。目前提出的Anti-UAV任务都只是将其看做与跟踪其他目标一样的任务，没有结合现实情况考虑。论文链接：https://arxiv.org/pdf/2306.15767https://arxiv.org/pdf/…...

编程日记 2025/5/12 23:14:23

数学建模之RSR秩和比综合评价法（详细）

RSR秩和比综合评价法一、概述秩和比法(Rank-sum ratio，简称RSR法)是我国学者田凤调于1988年提出的，田教授是我国杰出的卫生统计学家，该方法最初提出时用于解决医学卫生领域的综合评价问题，后经各领域学者的补充和完善&#xf…...

编程日记 2025/5/8 0:40:08

【Vue3】【Naive UI】＜NAutoComplete＞标签

【Vue3】【Naive UI】标签 <NAutoComplete> 是 Naive UI 库中的一个组件，用于实现自动完成或联想输入功能。它允许用户在输入时看到与当前输入匹配的建议列表，从而帮助用户更快地填写表单字段。这个组件通常用于搜索框、地址输入等场景&#xff…...

编程日记 2025/4/24 4:10:09

SpringBoot自动装配原理

SpringBoot自动装配原理在介绍SpringBoot自动装配原理之前我们需要先看一个注解 --> SpringBootApplication SpringBootApplication public class BackendApp {public static void main(String[] args) {SpringApplication.run(BackendApp.class, args);} }我们都知道Spr…...

编程日记 2025/5/12 22:44:27

Flask: flask框架是如何实现非阻塞并发的

写在前面：Flask框架是通过多线程/多进程+阻塞的socket实现非阻塞，其本质是基于python的源库socketserver实现的前言认识WSGI协议认识Werkzeug flask是如何实现非阻塞的本文使用的flask框架为最新的1.1.1版本，所有代码基于python3运行一：前言使用过flask或者其他web框…...

编程日记 2025/5/12 6:37:03

svg和canvas比较

SVG（Scalable Vector Graphics）和Canvas都是用于在网页上绘制图形的技术，但它们在工作原理、使用场景和特性上有所不同。以下是对SVG和Canvas的详细介绍及使用示例： 一、SVG 简介 SVG是一种基于XML的标记语言，用于描…...

编程日记 2025/5/12 23:58:59

【前端学习路线】（超详细版本）

先附上学习路线图：前端学习路线第一阶段：前端入门（htmlcss） 前端最基本的知识，需要先将这些内容融汇贯通，学习后面内容才会不吃力。学习完可以做几个静态页练习一下。推荐视频学习链接： 黑马程…...

编程日记 2025/5/12 18:04:43

VCU——matlab/simulink软件建模

一、认识MATLAB/Simulink 1. matlab主界面 2. simulink 二、Simulink 建模基础 1. Simulink模块 2. 模型的仿真 matlab 中比较两个浮点型，不要用，采取差值和Compare To Constant的方案 3. 自动代码生成...

编程日记 2025/5/6 13:16:41

ASP.NET Core SignalR 双工通信

01. 介绍 🎯 ASP.NET Core SignalR 是一个开放源代码库，它简化了向应用添加实时 Web 功能的过程。实时 Web 功能使服务器端代码可以在服务器上激发事件时将事件推送到连接的客户端。使用 SignalR，客户端也可以将消息发送到服务器&#xff…...

编程日记 2025/5/12 23:59:00

以数据驱动增长，火山引擎数智平台“数据找人”为双12营销提效

“双12”即将来临，众多商家最为关心的，莫过于如何借助对数据的充分利用实现降本增效，在竞争激烈的大环境中快人一步，为了达成这个目标，商家往往需要耗费人力、物力以及时间对海量数据进行寻找与分析。那么&#xff0c…...

编程日记 2025/5/9 9:20:51

VuePress学习

1.介绍 VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。…...

编程日记 2025/5/12 23:56:34

mysql cpu线上问题排查

查看当前的线程情况 show full processlist 查看当前的线程情况 SELECT * FROM performance_schema.threads WHERE PROCESSLIST_TIME > 0 查看当前数据库的连接数 SELECT * FROM performance_schema.threads WHERE PROCESSLIST_DB ‘db’ ; 查看当前mysql连接的数 SHOW GLO…...

编程日记 2025/5/12 22:45:32

QT6学习第九天 QDialog

QT6学习第九天 QDialog 对话框 QDialog模态和非模态对话框标准对话框颜色对话框进度对话框对话框 QDialog 模态和非模态对话框 QDialog 类是所有对话框类的基类。对话框是一个经常用来完成短小任务或和用户进行简单交互的顶层窗口。按照运行对话框时是否还可以和该程序的其…...

编程日记 2025/5/12 8:58:09

windows基础

系统目录服务端口注册表黑客常用DOS命令（在拿到shell时会用到） 一、系统目录 Windows目录系统的安装目录 System32configSAM文件是用户密码的存储文件 System32etchost文件记录本地解析（优先级大于DNS域名解析）可以自…...

编程日记 2025/5/9 21:58:33

《向量数据库指南》——OPPO分布式向量检索的实战与突破

OPPO对向量检索的探索：从单机到分布式的华丽转身在当今这个数据爆炸的时代，如何高效地存储、检索和分析数据，成为了企业面临的一大挑战。特别是在人工智能领域，向量数据的处理更是占据了举足轻重的地位。OPPO，作为全球知名的智能手机制造商，自然也不会放过这个技术风口…...

编程日记 2025/5/12 23:18:04

golang语言机构和基础语法

语言结构和基础语法 1.包声明 2.引入包 3.函数 4.init函数 5.变量 6.标识符 7.行分隔符 8.语句&表达式 9.注释 10.公有成员与私有成员 11.关键字、保留字和预定义标志引用类型 1.切片 2.map 3.channel 4.interface 5.func 6.指针类型关键词 1.break 跳转语句&#xff0c…...

编程日记 2025/5/12 23:31:14

在 MacOS 上为 LM Studio 更换镜像源

在 MacOS 之中使用 LM Studio 部署本地 LLM时，用户可能会遇到无法下载模型的问题。一般的解决方法是在 huggingface.co 或者国内的镜像站 hf-mirror.com 的项目介绍卡页面下载模型后拖入 LM Studio 的模型文件夹。这样无法利用 LM Studio 本身的搜索功能。本文将…...

编程日记 2025/5/12 12:56:04

python之Django连接数据库

文章目录连接Mysql数据库安装Mysql驱动配置数据库信息明确连接驱动定义模型在模型下的models.py中定义表对象在settings.py 中找到INSTALLED_APPS添加创建的模型测试testdb.py中写增删改查操作urls.py添加请求路径启动项目进行测试连接Mysql数据库安装Mysql驱动 pip inst…...

编程日记 2025/5/11 16:00:02

LLM学习笔记（15）LangChain、LlamaIndex、LlamaIndex

Transformer 和 PyTorch 是什么关系？ Transformer和PyTorch可以很好地配合使用，但它们并不是同一层面的工具。具体来说： Transformer是一个神经网络的架构，最初用于自然语言处理，但也可以扩展到其他任务（…...

编程日记 2025/5/9 18:28:08

springai结合ollama

目录 ollama 介绍使用下载： 安装： 点击这个玩意next就行了。运行 spring ai使用ollama调用本地部署的大模型加依赖配置yml 写代码 ollama 介绍官网：Ollama Ollama是一个用于部署和运行各种开源大模型的工具； …...

编程日记 2025/5/9 18:28:15

扫描IP段内的使用的IP

扫描IP段内的使用的IP 方法一：命令行命令行进入 for /L %i IN (1,1,254) DO ping -w 1 -n 1 192.168.3.%iarp -a方法二：python from scapy.all import ARP, Ether, srp import keyboarddef scan_network(ip_range):# 创建一个ARP请求包arp ARP(pds…...

编程日记 2025/5/8 2:26:26

ai即可一键生成ppt解决烦恼

在快节奏的职场环境中，制作PPT已经成为许多人日常工作的一部分。尽管PPT看似简单，却常常让人耗费大量时间。好在技术的进步为我们带来了全新的解决方案，比如智能生成PPT，让那些深夜加班的人看到了曙光。从“手动排版”到“一键生…...

编程日记 2025/5/12 18:05:01

三、【docker】docker和docker-compose的常用命令

文章目录一、docker常用命令1、镜像管理2、容器管理3、容器监控和调试4、网络管理5、数据卷管理6、系统维护7、实用组合命令8、常用技巧二、docker-compose常用命令1、基本命令2、构建相关3、运行维护4、常用组合命令5、实用参数一、docker常用命令 1、镜像管理 # 查看本地…...

编程日记 2025/5/11 0:09:20

「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果

本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色，用户可以在视觉上感受到按钮的闪烁效果，提升界面互动体验。关键词 UI互动应用闪烁动画动态按钮状态管理用户交互一、功能说明闪烁按钮效果应用实现了一个动态交互功能&#xf…...

编程日记 2025/5/12 17:28:45

小白爬虫——selenium入门超详细教程

目录一、selenium简介二、环境安装 2.1、安装Selenium 2.2、浏览器驱动安装三、基本操作 3.1、对页面进行操作 3.1.1、初始化webdriver 3.1.2、打开网页 3.1.3、页面操作 3.1.4、页面数据提取 3.1.5、关闭页面 3.1.6、综合小案例 3.2、对页面元素进行操作 3.2.…...

编程日记 2025/5/10 17:21:15

斯坦福李飞飞《AI Agent：多模态交互前沿调查》论文

多模态AI系统很可能会在我们的日常生活中无处不在。将这些系统具身化为物理和虚拟环境中的代理是一种有前途的方式，以使其更加互动化。目前，这些系统利用现有的基础模型作为构建具身代理的基本构件。将代理嵌入这样的环境中，有助于模型处理和…...

编程日记 2025/5/10 9:51:43

Wordpress ElementorPageBuilder插件存在文件读取漏洞(CVE-2024-9935)

免责声明: 本文旨在提供有关特定漏洞的深入信息，帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步，未经授权访问系统、网络或应用程序，可能会导致法律责任或严重后果。因此，作者不对读者基于本文内容所采取的任何行为承担责任。读者在…...

编程日记 2025/5/10 8:51:08

多模态视频大模型Aria在Docker部署

多模态视频大模型Aria在Docker部署契机 ⚙ 闲逛HuggingFace的时候发现一个25.3B的多模态大模型，支持图片和视频。刚好我有H20的GPU所以部署来看看效果，因为我的宿主机是cuda-12.1所以为了防止环境污染采用docker部署，通过一系列的披荆斩棘…...

编程日记 2025/5/10 5:47:17

【网盘系统】递归删除批量文件

为何需要用到递归？ 在网盘系统中，文件的类型分为文件和文件夹两种类型。当我们想要批量删除文件时，不乏其中会包含文件夹，而想要删除这个文件夹，自然其中所包含的文件都要删除，而其中所包含的文件也有可能…...

编程日记 2025/5/11 6:02:48

产品转后端？2

产品经理的视角能让你成为更好的后端工程师： 理解业务需求转换为技术方案的过程知道为什么要这样设计API明白数据结构的选择如何影响用户体验了解性能指标对业务的实际影响在实习过程中可以有意识地向后端倾斜： 常规产品经理工作： "…...

编程日记 2025/5/4 0:04:10

电子商务人工智能指南 2/6 - 需求预测和库存管理

介绍 81% 的零售业高管表示， AI 至少在其组织中发挥了中等至完全的作用。然而，78% 的受访零售业高管表示，很难跟上不断发展的 AI 格局。近年来，电子商务团队加快了适应新客户偏好和创造卓越数字购物体验的需求。采用 AI 不再是一…...

编程日记 2025/5/10 16:03:57

CSS中要注意的样式效果

1. 应用过渡效果 transition: var(--aa); 2.告诉浏览器元素可能会发生变换，从而优化性能。 will-change: transform; 3.使元素不响应鼠标事件。 pointer-events: none; 4.隐藏水平方向上的溢出内容 overflow-x: hidden; 5.定义一个元素的宽度和高度之间的比…...

编程日记 2025/5/6 13:16:43

文章目录

问题

目前解决效果 v1

思路

目前解决效果 v0

思路

代码

V1

相关文章：