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

el-select 添加icon

news 来源：原创 2025/9/22 18:57:33

Element-ui-plus 新版本：Select 选择器 | Element Plus

要实现如上的效果，要用到具名插槽 prefix，看代码：

<template><el-dialog ref="dialogRef" v-model="dialogVisible" :title="title" :width="dialogWidth" :before-close="handleClose" :close-on-click-modal="closeModal" :append-to-body="appendToBody" :class="['resizable-dialog', { 'is-dragging': isDragging }]" draggable><template #header><div class="dialog-header flex flex-col justify-center items-center"><div class="dialog-title font-bold text-gray-100">Transfer Crypto</div><div class="text-gray-500"> Balence: $33.96</div></div></template><el-form label-position="top"><el-form-item label="TOKEN"><el-select v-model="voData.form.chain" placeholder="Select Chain"><el-option v-for="item in voState.chainOptions" :key="item.value" :label="item.label" :value="item.value"><div class="flex items-center gap-1"><svg-icon class="w-3 h-3 ml-2" :name="item.icon" /><span :style="{ color: item.value }">{{ item.label }}</span></div></el-option><template #prefix><svg-icon class="w-3 h-3 ml-2" :name="selectedIcon"></svg-icon></template></el-select></el-form-item></el-form></el-dialog></template><script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
import SvgIcon from "../SvgIcon/SvgIcon.vue";// 定义 props
const props = defineProps({title: {type: String,default: "标题",},visible: {type: Boolean,default: false,},closeModal: {type: Boolean,default: false,},appendToBody: {type: Boolean,default: true,},
});// 定义 emits
const emit = defineEmits(["update:visible","close","cancel","confirm","save",
]);// 弹窗显示状态
const dialogVisible = computed({get: () => props.visible,set: (val) => emit("update:visible", val),
});// 弹窗宽度
const dialogWidth = ref("380px");const dialogRef = ref(null); // ref 引用const voState = reactive({chainOptions: [{label: "USDC",value: "USDC",icon: "usdc",},{label: "DAI",value: "DAI",icon: "dai",},{label: "ETH",value: "ETH",icon: "eth",},{ label: "USDC.e", value: "USDC.e", icon: "usdc" },{ label: "USDT", value: "USDT", icon: "usdt" },{ label: "POL", value: "POL", icon: "pol" },{ label: "WETH", value: "WETH", icon: "weth" },],
});const voData = reactive({form: {chain: "",},
});// 根据选中的值动态计算图标
const selectedIcon = computed(() => {const selectedOption = voState.chainOptions.find(option => option.value === voData.form.chain);return selectedOption ? selectedOption.icon : null;
});// 关闭弹窗
const close = () => {emit("close");dialogVisible.value = false;
};// 取消
const cancel = () => {emit("cancel");dialogVisible.value = false;
};// 确认
const confirm = () => {emit("confirm");
};// 保存
const save = () => {emit("save");
};// 处理关闭事件
const handleClose = () => {emit("cancel");dialogVisible.value = false;
};// 监听窗口大小变化
onMounted(() => {});// 移除监听器
onUnmounted(() => {});
</script><style lang="scss" scoped>
</style>

el-select 添加icon

Element-ui-plus 新版本：Select 选择器 | Element Plus 要实现如上的效果 ，要用到具名插槽 prefix，看代码： <template><el-dialog ref"dialogRef" v-model"dialogVisible" :title"title"…...

编程日记 2025/9/22 18:57:33

Qt的QPushButton样式设置

在Qt中，可以通过样式表（QSS）为QPushButton设置丰富的样式。以下是常见样式设置方法的详细说明： 1. 基础样式 // 设置背景色、文字颜色、圆角边框 button->setStyleSheet("QPushButton {"" background-color…...

编程日记 2025/9/11 16:01:15

Java函数计算冷启动从8s到800ms的优化实录

在函数计算场景中，冷启动性能对用户体验至关重要。本文将分享如何将 Java 函数计算的冷启动时间从 8 秒优化到 800 毫秒，包括具体的技术手段和代码示例。一、背景介绍函数计算是一种事件驱动的计算服务，用户只需上传代码，无需管理服务器。但在实际使用中，函数计算的冷…...

编程日记 2025/9/18 18:24:24

1-1 Hello World fn main() {println!("Hello World!");// 动手试一试println!("Im a Rustacean!"); }Hello World! Im a Rustacean!要点1 ：println 自带换行符注释 fn main() {let x 5 /* 90 */ 5;println!("Is x 10 or 100? x …...

编程日记 2025/9/18 20:18:04

STM32、GD32驱动TM1640原理图、源码分享

一、原理图分享二、源码分享 /************************************************* * copyright: * author:Xupeng * date:2024-07-18 * description: **************************************************/ #include "smg.h"#define DBG_TAG "smg&…...

编程日记 2025/9/8 11:33:50

Centos安装php-8.0.24.tar

查看系统环境 cat /etc/redhat-release 预先安装必要的依赖 yum install -y \ wget \ gcc \ gcc-c \ autoconf \ automake \ libtool \ make \ libxml2 \ libxml2-devel \ openssl \ openssl-devel \ sqlite-devel yum update 1、下载解压 cd /data/ wget https:/…...

编程日记 2025/9/21 1:25:20

VNC远程控制Mac

前言 macOS系统自带有VNC远程桌面，我们可以在控制端上安装配置VNC客户端，以此来实现远程控制macOS。但通常需要在不同网络下进行远程控制，为此，我们可以在macOS被控端上使用cpolar做内网穿透，映射VNC默认端口5…...

编程日记 2025/9/15 11:14:35

基于大数据的北京市天气数据分析系统的设计与实现

【Flask】基于Flask的北京市天气数据分析系统的设计与实现（完整系统源码开发笔记详细部署教程）✅ 目录一、项目简介二、项目界面展示三、项目视频展示一、项目简介该系统采用Python和Flask框架，结合Pandas、NumPy等数据处理库及Echarts进…...

编程日记 2025/9/19 8:18:33

20250214在ubuntu20.04下使用obs studio录制外挂的1080p的USB摄像头【下载安装】

20250214在ubuntu20.04下使用obs studio录制外挂的1080p的USB摄像头 2025/2/14 9:10 缘起：笔记本电脑在ubuntu20.04下使用Guvcview录制自带的摄像头，各种问题。 1、降帧率。WIN10/11自带的相机应用可以满速30fps，马上重启到ubuntu20.04&#…...

编程日记 2025/9/21 12:50:36

OpenEuler学习笔记（三十）：在OpenEuler上搭建3D建模环境

在OpenEuler上搭建3D建模环境，通常可以选择一些常见的3D建模软件，如Blender、FreeCAD等。以下以搭建Blender和FreeCAD这两款软件的使用环境为例，为你详细介绍搭建步骤。搭建Blender 3D建模环境 1. 更新系统软件包首先，确保系…...

编程日记 2025/9/21 10:19:30

Deepseek R1模型本地化部署+API接口调用详细教程：释放AI生产力

文章目录前言一、deepseek R1模型与chatGPT o1系列模型对比二、本地部署步骤1.安装ollama2部署DeepSeek R1模型删除已存在模型，以7b模型为例三、DeepSeek API接口调用Cline配置前言随着最近人工智能 DeepSeek 的爆火，越来越多的技术大佬们开始关注如…...

编程日记 2025/9/21 22:30:05

Ubuntu添加桌面快捷方式

以idea为例一. 背景在ubuntu中，很多时候是自己解压的文件并没有桌面快捷方式，需要自己找到对应的目录的执行文件手动打开，很麻烦而只需要在 /usr/share/applications 中创建自定义的desktop文件就能自动复制到桌面二. 添加方法创建desk…...

编程日记 2025/9/21 12:53:58

教程：使用 Vue 3 和 arco 实现表格合并

1. 功能概述本教程将介绍如何使用 Vue 3 和 arco 组件库实现表格合并功能。具体来说，我们会根据表格数据中的某个字段（如 type）对表格的某一列（如入库类型列）进行合并，同时将质检说明列合并为一列。 2. …...

编程日记 2025/9/19 10:14:54

【MySQL数据库】Ubuntu下的mysql

目录 1，安装mysql数据库 2，mysql默认安装路径 3，my.cnf配置文件? 4，mysql运用的相关指令及说明 5，数据库、表的备份和恢复 mysql是一套给我们提供数据存取的，更加有利于管理数据的服务的网络程序。下…...

编程日记 2025/9/13 13:54:36

Java实现MinIO上传PDF文件并配置浏览器在线打开而非下载

在Minio中上传PDF文件后，通常文件的访问方式（即URL）是配置为允许下载文件的，因为大多数Web服务器和存储服务默认将PDF文件视为应下载的内容类型（Content-Type: application/pdf）。但是，如果你想…...

编程日记 2025/9/22 15:40:30

CSV格式和普通EXCEL格式文件的区别

CSV 文件（.csv） 普通的 Excel 文件（.xlsx 或 .xls) 主要体现在文件格式、数据存储、功能支持等方面: 文件格式比较项CSV 文件 (.csv)Excel 文件 (.xlsx/.xls)文件类型纯文本文件二进制或 XML 格式数据分隔逗号（,&#xff09…...

编程日记 2025/9/19 8:26:53

安卓基础（持续更新的笔记）

为什么要这样： // 创建请求体RequestBody body RequestBody.create(MediaType.parse("application/json; charsetutf-8"),jsonObject.toString()); jsonObject 就包含了一个 JSON 数据，它其实就是： {"name": "张…...

编程日记 2025/9/20 4:11:16

大模型Deepseek的使用_基于阿里云百炼和Chatbox

目录前言1. 云服务商2. ChatBox参考前言上篇博文中探索了（本地）部署大语言模型，适合微调、数据高隐私性等场景。随着Deepseek-R1的发布，大语言模型的可及性得到极大提升，应用场景不断增加，对高可用的方…...

编程日记 2025/9/21 14:30:18

数学建模基础训练-1：概念解析

文章目录数学建模基础训练-1：概念解析问题一：如何找到“概念”？问题二：如何全面理解概念的基础含义？问题三：如何深刻理解概念并作出创新点发掘？实际举例问题一 :研究并给出寒假开学某大学返校交…...

编程日记 2025/9/21 13:54:16

【mybatis】基本操作：详解Spring通过注解和XML的方式来操作mybatis

mybatis 的常用配置配置数据库连接 #驱动类名称 spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver #数据库连接的url spring.datasource.urljdbc:mysql://127.0.0.1:3306/mybatis_test characterEncodingutf8&useSSLfalse #连接数据库的名 spring.datasourc…...

编程日记 2025/9/22 2:51:12

联邦学习中的“参数聚合“机制详解：医疗数据隐私保护的技术实现路径

一、技术原理：参数聚合的数学本质 1.1 核心数学公式联邦平均算法（FedAvg）： \theta_{global}^{t1} \sum_{k1}^K \frac{n_k}{N} \theta_k^t其中： K K K：参与本轮训练的客户端数量 n k n_k nk&#xff…...

编程日记 2025/9/11 21:20:42

LVS 负载均衡集群（NAT模式）

一、环境准备四台主机（一台 LVS、两台 RS、一台客户端） 注意每个虚拟机都需要关闭防火墙和 selinux 1.1.LVS 主机 LVS 主机（两块网卡） 第一块：NAT模式（内网） 第二块：添加网卡&am…...

编程日记 2025/9/20 22:09:31

Rocky Linux系统修改网卡全攻略

Rocky Linux系统修改网卡全攻略 Rocky Linux系统修改网卡全攻略一、了解网卡相关知识二、查看当前网卡配置（一）使用ip命令（二）使用ifconfig命令（需安装）三、修改网卡配置文件（一）修改IP地址（二）修改网关和DNS服务器（三）保存并退出配置文件四、重启网络服务使配置生…...

编程日记 2025/9/22 5:20:52

常用查找算法整理（顺序查找、二分查找、哈希查找、二叉排序树查找、平衡二叉树查找、红黑树查找、B树和B+树查找、分块查找）

常用的查找算法： 顺序查找：最简单的查找算法，适用于无序或数据量小的情况，逐个元素比较查找目标值。二分查找：要求数据有序，通过不断比较中间元素与目标值，将查找范围缩小一半，效率…...

编程日记 2025/9/17 9:41:40

自动化办公|xlwings 数据类型和转换

xlwings 数据类型和转换：Python 与 Excel 的桥梁在使用 xlwings 进行 Python 和 Excel 数据交互时，理解两者之间的数据类型对应关系至关重要。本篇将详细介绍 Python 数据类型与 Excel 数据类型的对应关系，以及如何进行数据类型转换。一、…...

编程日记 2025/9/15 16:04:43

Edge浏览器清理主页

我们都知道，Microsoft Edge浏览器是微软创造的搜索浏览器，Windows10、11自带。但是你可以看到，每次你打开Edge浏览器的时候都可以看到许多的广告，如图： 导致打开Edge浏览器的时候会遭受卡顿，广告骚扰&#…...

编程日记 2025/9/21 21:06:58

RedHat8安装postgresql15和 postgis3.4.4记录及遇到的问题总结

安装包对照版本参考 UsersWikiPostgreSQLPostGIS – PostGIS 如果Red Hat系统上有旧版本的PostgreSQL需要卸载在较新的Red Hat版本，使用dnf包管理器卸载：sudo dnf remove postgresql-server postgresql 旧版本，使用yum包管理器卸载 sudo y…...

编程日记 2025/9/20 16:18:10

Java 大视界 -- 绿色大数据：Java 技术在节能减排中的应用与实践（90）

💖亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2025/9/20 1:51:50

Python 文本探秘：正则表达式的易错迷宫穿越 -- 7. 正则表达式

正则表达式是 Python 中处理文本的强大武器，但它复杂的语法和规则构成了一个易错迷宫。本文深入剖析了正则表达式模式编写的错误、匹配规则的误解、性能优化的忽视等问题。通过大量的文本处理实例，展示了错误的正则表达式使用方式以及正确的解决方案。帮…...

编程日记 2025/9/21 1:54:28

Ubuntu22.04通过Docker部署Jeecgboot

程序发布环境包括docker、mysql、redis、maven、nodejs、npm等。一、安装docker 1、用如下命令卸载旧Docker： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done 2、安装APT环境依赖包…...

编程日记 2025/9/20 22:37:20

数据结构二叉树

一、⼆叉树的定义⼆叉树是⼀种特殊的树型结构，它的特点是每个结点⾄多只有2棵⼦树（即⼆叉树中不存在度⼤于2的结点），并且⼆叉树的⼦树有左右之分，其次序不能任意颠倒。⼆叉的意思是这种树的每⼀个结点最多只有两个孩…...

编程日记 2025/9/21 11:12:40

基于python sanic框架，使用Nacos进行微服务管理

微服务软件系统构建方式，已经很普及了，通过开源的sanic进行微服务管理，便捷，技术也比较成熟，而在项目实际应用过程中，微服务类型不仅有java的，还有nodejs、python等，尤其是结合算法模型构建的python接口，需要在Nacos进行注册管理。本文内容耗时2天踏坑，亲测一切ok。 …...

编程日记 2025/9/21 1:57:39

hbase合并队列超长问题分析

问题现象 hbase集群合并队列超长，有节点上合并任务已经运行超过1天未结束，合并队列总长不断增加。问题分析参数配置：配置参数默认值含义hbase.hregion.memstore.flush.size128MMemStore达到该值会Flush成StoreFilehbase.hregion.memstore.block.multiplier4当region中…...

编程日记 2025/9/21 17:48:37

【设计模式】【行为型模式】解释器模式（Interpreter）

👋hi，我不是一名外包公司的员工，也不会偷吃茶水间的零食，我的梦想是能写高端CRUD 🔥 2025本人正在沉淀中… 博客更新速度 👍 欢迎点赞、收藏、关注，跟上我的更新节奏 🎵 当你的天空突…...

编程日记 2025/9/19 20:19:32

DeepSeek-R1 蒸馏 Qwen 和 Llama 架构企业级RAG知识库

“DeepSeek-R1的输出，蒸馏了6个小模型”意思是利用DeepSeek-R1这个大模型的输出结果，通过知识蒸馏技术训练出6个参数规模较小的模型，以下是具体解释： - **知识蒸馏技术原理**：知识蒸馏是一种模型压缩技术，核…...

编程日记 2025/9/7 14:02:51

无人机航迹规划：互联银行系统优化（Connected Banking System Optimizer，CBSO）求解无人机路径规划MATLAB

一、互联银行系统优化算法互联银行系统优化（Connected Banking System Optimizer，CBSO）算法是2024年由Mehrdad Nemati等人提出的一种智能优化算法，其灵感来源于银行系统之间的连接和交易过程。在银行系统中，核心银行…...

编程日记 2025/9/20 22:23:10

学习web数据埋点

什么是埋点，以及为什么需要埋点通过代码主动收集用户行为数据（如点击、浏览、停留时长等），用于数据分析驱动产品优化。一、前端埋点在客户端（浏览器、移动端应用）直接采集用户行为数据，通…...

编程日记 2025/9/22 6:22:54

Windows 11 安装 Docker

1.以管理员身份打开 Windows PowerShell 2.执行下面三行命令来启动WSL和虚拟机平台 dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestartdism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norest…...

编程日记 2025/9/21 16:31:21

深度学习框架探秘｜Keras：深度学习的魔法钥匙

一、引言：深度学习浪潮中的 Keras 前面的文章我们探秘了深度学习框架中的两大明星框架 —— TensorFlow 和 PyTorch 以及两大框架的对比在深度学习的众多框架中，还有一款框架备受开发者们的喜爱 —— Keras 。它就像是一位贴心的助手，为我…...

编程日记 2025/9/21 19:56:52

HTML【详解】input 标签

input 标签主要用于接收用户的输入，随 type 属性值的不同，变换其具体功能。通用属性属性属性值功能name字符串定义输入字段的名称，在表单提交时，服务器通过该名称来获取对应的值disabled布尔值禁用输入框，使其无法被…...

编程日记 2025/9/19 14:55:44

在vscode中拉取gitee里的项目并运行

拉取项目：方法一：vscode点击查看--->终端(或者直接通过快捷键ctrol+ `打开）在终端内通过cd命令定位到你想存放项目的文件夹例如：cd h：通过命令：git clone 地址例如：git clone newbee-mall-vue-app: 前端代码等待拉取完成即可在对应文件夹下看到项目啦方…...

编程日记 2025/9/19 16:28:35

Spring Cloud微服务

一、定义微服务，又叫微服务架构，也就是分布式架构，是软件架构的一种方式。它将一个大的单体架构应用拆分成一系列按业务领域划分模块的、小的自治服务。如开发部有很多任务，如果把任务给了一个组的话，效率肯定会降低…...

编程日记 2025/9/10 18:42:11

打破AI黑盒，拥抱开源力量：基于openGauss+DeepSeek的本地知识库，打造你的专属AI助手！

引言：什么是RAG和LLM？ LLM (Large Language Model，大语言模型): 就像 ChatGPT 这样的 AI 模型，拥有强大的语言理解和生成能力，但它们的知识局限于训练数据，且可能产生“幻觉”（即生成不准确的信…...

编程日记 2025/9/21 12:22:43

如何在 IntelliJ IDEA 中使用 Bito AI 插件

如何在 IntelliJ IDEA 中使用 Bito AI 插件 Bito: On-Demand AI Code Reviews Bito AI 插件是一个智能开发工具，能够帮助开发者提升编码效率，自动化生成代码、注释、单元测试等。本文将详细介绍 Bito AI 插件在 IntelliJ IDEA 中的使用方法&#xff0c…...

编程日记 2025/9/19 12:18:53

用xml配置spring, bean标签有哪些属性?

用xml配置spring, bean标签有哪些属性? 在Spring框架中，使用XML配置文件时，<bean>标签用于定义一个Bean。以下是一些常用的<bean>标签属性： 1. class 描述：指定Bean的类名。示例：<bean id"myBe…...

编程日记 2025/9/15 7:05:25

微信小程序中缓存数据全方位解惑

微信小程序中缓存数据全方位解惑微信小程序中的数据缓存是提升用户体验和优化性能的重要手段，跟电脑浏览器中的Local Storage的性质一样。以下是关于微信小程序数据缓存的相关知识点和示例的详细介绍： 1. 数据缓存的类型微信小程序提供了两种数据缓…...

编程日记 2025/9/7 11:53:58

物联网平台-分布式的设备接入与管理系统

乐吾乐物联网平台是由乐吾乐自主研发的一款分布式的设备接入与管理系统，专为满足不断增长的设备接入和数据处理需求而设计。平台集数据采集、分析、监控、告警和通知等功能于一体，并融合了乐吾乐大屏可视化和乐吾乐3D数字孪生技术，帮助用户快…...

编程日记 2025/9/19 13:08:04

ABP - 事件总线之分布式事件总线

ABP - 事件总线之分布式事件总线 1. 分布式事件总线的集成1.2 基于 RabbitMQ 的分布式事件总线 2. 分布式事件总线的使用2.1 发布2.2 订阅2.3 事务和异常处理 3. 自己扩展的分布式事件总线实现事件总线可以实现代码逻辑的解耦，使代码模块之间功能职责更清晰。而分布…...

编程日记 2025/9/20 8:49:24

ComfyUI流程图生图原理详解

一、引言 ComfyUI 是一款功能强大的工具，在图像生成等领域有着广泛应用。本文补充一点ComfyUI 的安装与配置过程遇到的问题，并深入剖析图生图过程及相关参数，帮助读者快速入门并深入理解其原理。二、ComfyUI 的安装与配置中遇到的问题 &a…...

编程日记 2025/9/21 6:14:07

洛谷 P3660 USACO17FEB Why Did the Cow Cross the Road III 题解

题意有一个圆，圆周上按顺时针方向给出 2 n 2n 2n个点。第 i i i个点的颜色是 c o l o r i color_i colori，其中数据保证 1 ≤ c o l o r i ≤ n 1\le color_i\le n 1≤colori≤n，而且每种不同的颜色有且只有两个点。不存在位置重叠的点…...

编程日记 2025/9/17 9:36:36

相关文章：