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

vxe-form table 修改表单数据校验的主题样式

news 来源：原创 2025/8/2 23:04:46

在使用 vxe-form 表单校验时，数据校验可以支持2种主题样式

官网：https://vxeui.com

普通样式

通过设置 valid-config.theme=‘normal’ 设置为普通样式
在这里插入图片描述

高亮样式

通过设置 valid-config.theme=‘beautify’ 设置为高亮样式

在这里插入图片描述

<template><div><vxe-radio-group v-model="formOptions.validConfig.theme"><vxe-radio-button label="normal" content="简化"></vxe-radio-button><vxe-radio-button label="beautify" content="高亮"></vxe-radio-button></vxe-radio-group><vxe-form v-bind="formOptions" v-on="formEvents" ></vxe-form></div>
</template><script setup>
import { reactive } from 'vue'
import { VxeUI } from 'vxe-pc-ui'const formOptions = reactive({validConfig: {theme: 'beautify'},data: {name: '',nickname: '',sex: '',age: ''},rules: {name: [{ required: true, message: '请输入名称' }],sex: [{ required: true, message: '请选择性别' }],age: [{ required: true, message: '请输入年龄' }]},items: [{ field: 'name', title: '名称', span: 24, itemRender: { name: 'VxeInput' } },{ field: 'sex', title: '性别', span: 12, itemRender: { name: 'VxeInput' } },{ field: 'age', title: '年龄', span: 12, itemRender: { name: 'VxeInput' } },{align: 'center',span: 24,itemRender: {name: 'VxeButtonGroup',options: [{ type: 'submit', content: '提交', status: 'primary' },{ type: 'reset', content: '重置' }]}}]
})const formEvents = {submit () {VxeUI.modal.message({ content: '保存成功', status: 'success' })},reset () {VxeUI.modal.message({ content: '重置事件', status: 'info' })}
}
</script>

https://gitee.com/x-extends/vxe-pc-ui
https://github.com/x-extends/vxe-pc-ui

相关文章：

vxe-form table 修改表单数据校验的主题样式

在使用 vxe-form 表单校验时&#xff0c;数据校验可以支持2种主题样式 官网&#xff1a;https://vxeui.com 普通样式 通过设置 valid-config.theme‘normal’ 设置为普通样式 高亮样式 通过设置 valid-config.theme‘beautify’ 设置为高亮样式 <template><div&…...

编程日记 2025/8/2 23:04:46

【UE5】使用基元数据对材质传参，从而避免新建材质实例

在项目中&#xff0c;经常会遇到这样的需求&#xff1a;多个模型&#xff08;例如 100 个&#xff09;使用相同的材质&#xff0c;但每个模型需要不同的参数设置&#xff0c;比如不同的颜色或随机种子等。 在这种情况下&#xff0c;创建 100 个实例材质不是最佳选择。正确的做…...

编程日记 2025/7/29 14:39:38

一个计算频率的模块

先上代码 module _sync_reg #(parameter INIT 0,parameter ASYNC_RESET 0 ) (input clk,input rst,input in,output out );(* ASYNC_REG "TRUE" *) reg sync1; (* ASYNC_REG "TRUE" *) reg sync2;assign out sync2;generate if (ASYNC_RE…...

编程日记 2025/8/2 2:40:38

在SpringBoot项目中集成MongoDB

文章目录 1. 准备工作2. 在SpringBoot项目中集成MongoDB2.1 引入依赖2.2 编写配置文件2.3 实体类 3. 测试4. 文档操作4.1 插入操作4.1.1 单次插入4.1.2 批量插入 4.2 查询操作4.2.1 根据id查询4.2.2 根据特定条件查询4.2.3 正则查询4.2.4 查询所有文档4.2.5 排序后返回 4.3 删除…...

编程日记 2025/7/29 20:35:12

OpenJudge - 24：输出保留3位小数的浮点数

【题目来源】http://shnoip.openjudge.cn/level1/24/【题目描述】 读入一个单精度浮点数&#xff0c;保留3位小数输出这个浮点数。【输入格式】 只有一行&#xff0c;一个单精度浮点数。【输出格式】 也只有一行&#xff0c;读入的单精度浮点数。【输入样例】 12.34521【输出样…...

编程日记 2025/7/28 1:18:39

华为流程L1-L6业务流程深度细化到可执行

该文档主要介绍了华为业务流程的深度细化及相关内容，包括流程框架、建模方法、流程模块描述、流程图建模等，旨在帮助企业构建有效的流程体系，实现战略目标。具体内容如下： 华为业务流程的深度细化 流程层级：华为业务流程分为 L1 - L6 六个层级，L1 为流程大类，L2 为流程…...

编程日记 2025/7/30 14:52:20

Python中Tushare（金融数据库）入门详解

文章目录 Python中Tushare&#xff08;金融数据库&#xff09;入门详解一、引言二、安装与注册1、安装Tushare2、注册与获取Token 三、Tushare基本使用1、设置Token2、获取数据2.1、获取股票基础信息2.2、获取交易日历2.3、获取A股日线行情2.4、获取沪股通和深股通成份股2.5、获…...

编程日记 2025/8/2 13:23:29

Odoo中，要实现实时数据推送，SSE 与 WebSocket 该如何选择

目录 1. 技术特点对比 2. 使用场景 适合使用 SSE 的场景&#xff1a; 适合使用 WebSocket 的场景&#xff1a; 3. 优缺点总结 SSE 优点&#xff1a; SSE 缺点&#xff1a; WebSocket 优点&#xff1a; WebSocket 缺点&#xff1a; 4. 选择建议 选择 SSE 的条件&#x…...

编程日记 2025/7/28 20:53:03

02. Python基础知识

一、注释 在开发程序过程中&#xff0c;如果一段代码的逻辑比较复杂&#xff0c;不是特别容易理解&#xff0c;可以适当添加注释&#xff0c;以辅助自己或其他开发人员解读代码。注释是给程序员看的&#xff0c;为了让程序员方便阅读代码&#xff0c;解释器会忽略注释。在 Pyto…...

编程日记 2025/7/27 21:53:40

Mac 修改默认jdk版本

当前会话生效 这里演示将 Java 17 版本降低到 Java 8 查看已安装的 Java 版本&#xff1a; 在终端&#xff08;Terminal&#xff09;中运行以下命令&#xff0c;查看已安装的 Java 版本列表 /usr/libexec/java_home -V设置默认 Java 版本&#xff1a; 找到 Java 8 的安装路…...

编程日记 2025/7/30 18:31:03

数字赋能，气象引领 | 气象景观数字化服务平台重塑京城旅游生态

在数字化转型的浪潮中&#xff0c;旅游行业正以前所未有的速度重塑自身&#xff0c;人民群众对于高品质、个性化旅游服务需求的日益增长&#xff0c;迎着新时代的挑战与机遇&#xff0c;为开展北京地区特色气象景观预报&#xff0c;打造“生态气象旅游”新业态&#xff0c;助推…...

编程日记 2025/7/31 8:55:57

C语言项⽬实践-贪吃蛇

目录 1.项目要点 2.窗口设置 2.1mode命令 2.2title命令 2.3system函数 2.Win32 API 2.1 COORD 2.2 GetStdHandle 2.3 CONSOLE_CURSOR_INFO 2.4 GetConsoleCursorInfo 2.5 SetConsoleCursorInfo 2.5 SetConsoleCursorPosition 2.7 GetAsyncKeyState 3.贪吃蛇游戏设…...

编程日记 2025/7/30 1:09:32

springboot整合kafka

springboot整合kafka pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven…...

编程日记 2025/7/23 16:25:18

量子计算机全面解析：技术、应用与未来

标题&#xff1a;量子计算机全面解析&#xff1a;技术、应用与未来 一、什么是量子计算机&#xff1f; 量子计算机是一种利用量子力学原理&#xff08;如叠加、纠缠和干涉&#xff09;进行计算的新型计算设备。与传统计算机基于比特&#xff08;0 和 1&#xff09;的运算方式不…...

编程日记 2025/7/27 19:45:18

提升软件测试报告的质量：Allure2中添加用例失败截图、日志、HTML块和视频的方法

Allure2的用途 Allure2是一个用于生成测试报告的框架&#xff0c;广泛应用于自动化测试和手动测试中。它支持多种测试框架&#xff0c;如JUnit、TestNG、MSTest等&#xff0c;通过生动的图表和详细的日志&#xff0c;使得非技术人员也能轻松地理解测试结果。许多团队选用Allur…...

编程日记 2025/8/1 20:47:20

Mysql启动报错：本地计算机上的mysql服务启动后停止,某些服务在未由其他服务或程序使用时将自动停止

原因 是手动去改了mysql的配置文件my.ini的内容&#xff0c;重新启动服务启动不了。 看了很多文章最终找到了恢复数据的办法。 第一步备份 先备份mysql数据存的文件夹Data&#xff0c;如果找不到则去看配置文件那一行datadir 第二步重新安装mysql 卸载篇可以看我之前发的文…...

编程日记 2025/7/31 20:34:58

国际环境和背景下的云计算领域

前言 在当前国际环境和背景下&#xff0c;云计算领域呈现出复杂多变的局面&#xff0c;其发展深受技术创新、地缘政治、全球经济以及监管政策的影响。以下从技术趋势、市场竞争、地缘政治和监管环境四个方面详细解析云计算领域的现状。 一、技术趋势&#xff1a;多云与边缘计算…...

编程日记 2025/8/1 8:16:57

网络安全-企业环境渗透2-wordpress任意文件读FFmpeg任意文件读

一、 实验名称 企业环境渗透2 二、 实验目的 【实验描述】 操作机的操作系统是kali 进入系统后默认是命令行界面 输入startx命令即可打开图形界面。 所有需要用到的信息和工具都放在了/home/Hack 目录下。 本实验的任务是通过外网的两个主机通过代理渗透到内网的两个主机。…...

编程日记 2025/7/30 23:35:33

C# 超链接控件LinkLabel无法触发Alt快捷键

在C#中&#xff0c;为控件添加快捷键的方式有两种&#xff0c;其中一种就是Windows中较为常见的Alt快捷键&#xff0c;比如运行对话框&#xff0c;记事本菜单等。只需要按下 Alt 框号中带下划线的字母即可触发该控件的点击操作。如图所示 在C#开发中&#xff0c;实现类似的操作…...

编程日记 2025/7/30 1:07:47

一分钟学习数据安全——数据安全风险的系统化应对思路

数据是组织的重要资产&#xff0c;未经授权的数据访问可能导致数据泄露、数据篡改、隐私侵犯和合规风险等问题。企业可以通过数据访问控制来提高信息系统在数据全生命周期管理中的安全性。企业可以引入IAM系统&#xff0c;来控制身份来管理权限。通过对用户访问权限的管理和合适…...

编程日记 2025/8/2 16:47:13

深入了解 Spring Security 的授权核心功能

Spring Security 是一个强大且灵活的安全框架&#xff0c;能够帮助开发者为 Spring 应用程序提供认证和授权服务。在实际应用中&#xff0c;Spring Security 主要涉及用户的认证&#xff08;谁是用户&#xff09;和授权&#xff08;用户能做什么&#xff09;。本文将深入讲解 S…...

编程日记 2025/8/1 7:06:43

【Web前端】创建我的第一个 Web 表单

Web 开发中&#xff0c;表单是不可或缺的组成部分。无论是用户注册、登录还是反馈收集&#xff0c;表单都是与用户交互的重要方式。 什么是 Web 表单&#xff1f; Web 表单是一种用于收集用户输入数据的界面元素。它们允许用户在浏览器中输入信息并提交这些信息到服务器。Web …...

编程日记 2025/7/31 21:51:36

“人工智能+高职”：VR虚拟仿真实训室的发展前景

在当今科技日新月异的时代&#xff0c;人工智能&#xff08;AI&#xff09;与虚拟现实&#xff08;VR&#xff09;技术的融合正逐步改变着各行各业&#xff0c;教育领域也不例外。特别是在高等职业教育&#xff08;简称“高职”&#xff09;体系中&#xff0c;VR虚拟仿真实训室…...

编程日记 2025/7/27 18:31:03

状态模式之状态机

状态机的背景 在软件开发过程中&#xff0c;尤其是涉及到复杂的系统行为控制时&#xff0c;我们常常会遇到这样的情况&#xff1a;一个对象或者系统会在多种状态之间进行转换&#xff0c;并且在不同状态下对相同事件的响应是不同的。 以自动售卖机为例&#xff0c;自动售卖机…...

编程日记 2025/7/4 5:20:22

NUXT3学习日记四（路由中间件、导航守卫）

前言 在 Nuxt 3 中&#xff0c;中间件&#xff08;Middleware&#xff09;是用于在页面渲染之前或导航发生之前执行的函数。它们允许你在路由切换时执行逻辑&#xff0c;像是身份验证、重定向、权限控制、数据预加载等任务。中间件可以被全局使用&#xff0c;也可以只在特定页…...

编程日记 2025/7/30 16:44:55

基于重复控制补偿的高精度 PID 控制

1. 背景与原理 重复控制&#xff08;Repetitive Control, RC&#xff09;是一种适用于周期性信号跟踪和周期性扰动抑制的控制方法&#xff0c;通过在控制回路中引入周期补偿器来提高系统的控制精度。将 RC 与 PID 控制相结合&#xff0c;利用 PID 的快速响应特性和 RC 的周期补…...

编程日记 2025/8/2 22:10:39

Linux之日志

日志 在编写网络服务器, 各种软件时, 程序一定要打印一些日志信息. 1. 可以向显示器打印, 也可以向文件中写入. 2. 日志是软件在运行时记录的流水账, 用于排查服务进程挂掉的信息. 其中必须要有的是: 日志等级, 时间, 日志内容.可选的是文件名, 代码行数, 进程pid 等 日志…...

编程日记 2025/8/1 11:16:01

【LeetCode面试150】——202快乐数

博客昵称&#xff1a;沈小农学编程 作者简介&#xff1a;一名在读硕士&#xff0c;定期更新相关算法面试题&#xff0c;欢迎关注小弟&#xff01; PS&#xff1a;哈喽&#xff01;各位CSDN的uu们&#xff0c;我是你的小弟沈小农&#xff0c;希望我的文章能帮助到你。欢迎大家在…...

编程日记 2025/7/28 21:08:28

云原生之k8s服务管理

文章目录 服务管理Service服务原理ClusterIP服务 对外发布应用服务类型NodePort服务Ingress安装配置Ingress规则 Dashboard概述 认证和授权ServiceAccount用户概述创建ServiceAccount 权限管理角色与授权 服务管理 Service 服务原理 容器化带来的问题 自动调度&#xff1a;…...

编程日记 2025/7/27 1:23:20

【Vue】 npm install amap-js-api-loader指南

前言 项目中的地图模块突然打不开了 正文 版本太低了&#xff0c;而且Vue项目就应该正经走项目流程啊喂&#xff01; npm i amap/amap-jsapi-loader --save 官方说这样执行完&#xff0c;就这结束啦&#xff01;它结束了&#xff0c;我还没有&#xff0c;不然不可能记录这篇文…...

编程日记 2025/7/30 1:20:01

RocketMQ: 部署结构与存储特点

RocketMQ 是什么 它是一个队列模型的消息中间件&#xff0c;具有高性能、高可靠、高实时、分布式特点 Producer、Consumer、队列都可以分布式Producer 向一些队列轮流发送消息 队列集合称为 TopicConsumer 如果做广播消费则一个 consumer 实例消费这个 Topic 对应的所有队列如果…...

编程日记 2025/8/2 13:15:52

Android OpenGL ES详解——绘制圆角矩形

1、绘制矩形 代码如下&#xff1a; renderer类&#xff1a; package com.example.roundrectimport android.content.Context import android.opengl.GLES30 import android.opengl.GLSurfaceView.Renderer import com.opengllib.data.VertexArray import com.opengllib.prog…...

编程日记 2025/7/29 15:42:53

【大数据学习 | Spark】Spark的改变分区的算子

当分区由多变少时&#xff0c;不需要shuffle&#xff0c;也就是父RDD与子RDD之间是窄依赖。 当分区由少变多时&#xff0c;是需要shuffle的。 但极端情况下&#xff08;1000个分区变成1个分区)&#xff0c;这时如果将shuffle设置为false&#xff0c;父子RDD是窄依赖关系&…...

编程日记 2025/7/28 10:23:12

前端知识点---rest(javascript)

文章目录 前端知识点---rest(javascript)rest的用法基本语法特点使用场景与扩展运算符&#xff08;spread&#xff09;区别小练习 前端知识点—rest(javascript) rest出现于ES2015 function doSum(a,b, ...args) //示例中的args就是一个rest参数 //它会将后续的所有参数存储…...

编程日记 2025/7/30 4:41:06

Spark使用过程中的 15 个常见问题、详细解决方案

目录 问题 1&#xff1a;Spark 作业超时问题描述解决方案Python 实现 问题 2&#xff1a;内存溢出问题描述解决方案Python 实现 问题 3&#xff1a;Shuffle 性能问题问题描述解决方案Python 实现 问题 4&#xff1a;Spark 作业调度不均问题描述解决方案Python 实现 问题 5&…...

编程日记 2025/7/31 5:19:58

ASP.NET MVC宠物商城系统

该系统采用B/S架构&#xff0c;使用C#编程语言进行开发&#xff0c;以ASP.NET MVC框架为基础&#xff0c;以Visual Studio 2019为开发工具&#xff0c;数据库采用SQL Server进行保存数据。系统主要功能包括登录注册、宠物展示、个人中心、我的订单、购物车、用户管理、宠物类别…...

编程日记 2025/8/2 13:13:51

DQN系列算法详解

代码链接见文末 1. Q-learning 1.1 概述 Q-Learning是一种强化学习算法，目的是通过选择能带来最大长期收益的行为来完成任务。 做事包含瞬时奖励和记忆经验奖励： 在Q-Learning中，每个动作都会带来“瞬时奖励”，同时也会根据过去的经验记住哪些行为更有利。瞬时奖励： 这里…...

编程日记 2025/7/29 23:38:10

uniapp发布android上架应用商店权限

先看效果&#xff1a; 实现原理&#xff1a; 一、利用uni.addInterceptor的拦截器&#xff0c;在一些调用系统权限前拦截&#xff0c;进行弹窗展示&#xff0c;监听确定取消实现业务逻辑。 二、弹窗是原生nativeObj进行drawRect绘制的 三、权限申请调用使用的 plus.android.…...

编程日记 2025/7/31 6:38:28

已阻止加载“http://localhost:8086/xxx.js”的模块，它使用了不允许的 MIME 类型 (“text/plain”)。

记录今天解决的一个小bug 在终端启动8080端口号监听后&#xff0c;打开网址http://localhost:8080&#xff0c;发现不能正确加载页面&#xff0c;打开检查-控制台&#xff0c;出现如下警告&#xff1a;已阻止加载“http://localhost:8086/xxx.js”的模块&#xff0c;它使用了不…...

编程日记 2025/8/1 19:15:44

JavaEE之线程初阶（上）

前文我们知道计算机中的每一个程序都对应着一个进程&#xff0c;进程是CPU申请资源的最小单位&#xff0c;那么线程是什么呢&#xff0c;线程中我们又能学习到什么新的知识呢&#xff1f;&#xff1f; 我们来一探究竟 1. 认识线程&#xff08;Thread&#xff09; 线程是什么 …...

编程日记 2025/7/30 8:16:05

Spring Security @PreAuthorize注解

PreAuthorize 注解在 Spring Security 中提供了一种声明式的方法&#xff0c;可以在您的 Spring Boot 应用中添加方法级别的安全检查。本教程将引导您设置并有效使用 PreAuthorize&#xff0c;确保用户只能在具有特定角色或权限的情况下调用 REST API。 什么是 PreAuthorize&a…...

编程日记 2025/8/1 22:58:58

windows已建立威胁IP排查

在应急响应的时候&#xff0c;需要筛选出服务器建立连接的进程、PID&#xff0c;此代码可满足该需求实现共计2步 首先windos netstat-ano > all.txt&#xff0c; 上传至pycharm路径 第一步获取服务器建立连接的ip import re# 从文件读取 netstat 输出 def read_netstat_f…...

编程日记 2025/7/29 23:37:51

AI 大模型如何重塑软件开发流程？——技术革新与未来展望

人工智能的蓬勃发展为许多领域注入了强劲动力&#xff0c;而在软件开发这一关键技术领域&#xff0c;AI 大模型的应用正在彻底改变传统流程。从代码自动生成到智能测试&#xff0c;再到协同开发和流程优化&#xff0c;AI 正逐步成为软件开发者的得力助手&#xff0c;也推动企业…...

编程日记 2025/8/2 21:28:55

Admin.NET框架前端由于keep-alive设置缓存导致的onUnmount未触发问题

bug版本&#xff1a;next分支&#xff0c;基于.NET6版本&#xff1b; 问题描述&#xff1a; 1、添加keep-alive后&#xff0c;在其下运行的组件会出现onActived(被关注时)和onDeactived(取消关注时)生命周期&#xff0c;而组件原有生命周期为onMounted(被创造时)和onUnmounted(…...

编程日记 2025/8/2 16:35:59

Rest-assured

依赖 <--rest-assured依赖--><dependency><groupId>io.rest-assured</groupId><artifactId>rest-assured</artifactId><version>4.4.0</version><scope>test</scope> </dependency><--junit5依赖-->…...

编程日记 2025/7/30 11:15:56

ubuntu24挂载硬盘记录

1、显示硬盘及所属分区情况。在终端窗口中输入如下命令&#xff1a; sudo fdisk -l 找到自己硬盘的分区 我的地址/dev/sda 2、显示硬盘及所属分区情况。在终端窗口中输入如下命令&#xff0c;格式化自己硬盘&#xff1a; sudo mkfs -t ext4 /dev/sda 3、在终端窗口中输入如下…...

编程日记 2025/7/30 4:38:59

Dubbo集成SpringBoot实现远程服务调用

SpringBoot集成Dubbo Dubbo介绍了解 Dubbo 核心概念和架构dubbo特性dubbo运行原理图 SpringBoot集成Dubbo技术实战一、Dubbo Spring Boot 版本关系二、引入Maven依赖demo项目基础结构引入依赖创建每个模块1&#xff09;api模块2&#xff09;provider模块3&#xff09;consumer模…...

编程日记 2025/8/2 16:46:33

Redis最终篇分布式锁以及数据一致性

在前三篇我们几乎说完了Redis的所有的基础知识以及Redis怎么实现高可用性,那么在这一篇文章中的话我们主要就是说明如果我们使用Redis出现什么问题以及解决方案是什么,这个如果在未来的工作中也有可能会遇到,希望对看这篇博客的人有帮助,话不多说直接开干 一.Hotkey以及BigKey…...

编程日记 2025/7/31 7:40:19

TCP协议

报文格式 源/目的端口号&#xff1a;数据从哪个进程来&#xff0c;到哪个进程去32位序号&#xff1a;TCP传输过程中&#xff0c;在发送端出的字节流中&#xff0c;传输报文中的数据部分的每一个字节都有它的编号32位确认号&#xff1a;标识了报文接收端期望接收的字节序列4位首…...

编程日记 2025/8/2 13:39:33

Vue3 源码解析（十）：watch 的实现原理

本篇文章笔者会讲解 Vue3 中侦听器相关的 api&#xff1a;watchEffect 和 watch 。在 Vue3 之前 watch 是 option 写法中一个很常用的选项&#xff0c;使用它可以非常方便的监听一个数据源的变化&#xff0c;而在 Vue3 中随着 Composition API 的写法推行也将 watch 独立成了一…...

编程日记 2025/7/28 15:42:37