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

Vxe UI 根据vxe-tabs 绑定不同的值，渲染生成不同的 tabls（页签）内容

news 来源：原创 2025/9/13 22:22:41

VxeUI tabs控件，根据绑定不同的内容，动态渲染不同的表格数据放置在不同的 tab 页

效果图如下：

在这里插入图片描述

代码实现

<template><vxe-tabs :options="detailTabList"><vxe-tab-pane v-for="(item, index) in detailTabList" :key="index" :name="item.name" :title="item.title"><!-- 根据当前 Tab 名称动态绑定配置 --><vxe-grid :ref="`detailTableRef_${item.name}`" v-bind="gridDetailOptions[item.name]":row-config="{ isCurrent: true }"></vxe-grid></vxe-tab-pane></vxe-tabs>
</template><script setup>// Tab 列表 const detailTabList = ref([{ name: 'tab1', title: '明细1' },{ name: 'tab2', title: '明细2' }]);const gridDetailOptions = {tab1: {border: true,columns: [{ type: 'seq', width: 70 },{ field: 'name', title: 'Name' },{ field: 'sex', title: 'Sex' },{ field: 'age', title: 'Age' }],data: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }]},tab2: {border: false,columns: [{ type: 'seq', width: 60 },{ field: 'product', title: 'Product' },{ field: 'price', title: 'Price' }],data: [{ product: 'Test1',  price: 'test abc' },{ product: 'Test2', price: 'test abc' },{ product: 'Test3', price: 'test abc' },]}};
</script>

Vxe UI 根据vxe-tabs 绑定不同的值，渲染生成不同的 tabls（页签）内容

VxeUI tabs控件，根据绑定不同的内容，动态渲染不同的表格数据放置在不同的 tab 页效果图如下： 代码实现 <template><vxe-tabs :options"detailTabList"><vxe-tab-pane v-for"(item, index) in detailTabList&…...

编程日记 2025/9/13 22:22:41

Element Plus中el-select选择器的下拉选项列表的样式设置

el-select选择器，默认样式效果： 通过 * { margin: 0; padding: 0; } 去掉内外边距后的样式效果（样式变丑了）： 通过 popper-class 自定义类名修改下拉选项列表样式 el-select 标签设置 popper-class"custom-se…...

编程日记 2025/9/12 22:52:14

YOLOv11-ultralytics-8.3.67部分代码阅读笔记-train.py

train.py ultralytics\models\yolo\detect\train.py 目录 train.py 1.所需的库和模块 2.class DetectionTrainer(BaseTrainer): 1.所需的库和模块 # Ultralytics 🚀 AGPL-3.0 License - https://ultralytics.com/licenseimport math import random from copy…...

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

PR 安装包 2018-2024（Win，Mac）文中为使用技巧和教程

下载链接：https://pan.baidu.com/s/1LLv1tSXJxUcv6iOlcAHJEg?pwd1234 导语：Adobe Premiere Pro以98%的行业覆盖率和跨平台协作能力，稳居2025年视频剪辑工具榜首。本文涵盖基础配置、核心剪辑、高级调色、效率革命、企业级实战五大模块&…...

编程日记 2025/9/8 4:31:03

请求Geoserver的WTMS服务返回200不返回图片问题-跨域导致

今天碰到个奇怪问题，改了个页面标题再打包布署GeoServer发现调用WTMS服务失败，请求返回状态码200，返回包大小0，使用postman模拟请求是可以正常返回图片的。跟之前版本对比如下： 正常Response请求: HTTP/1.1 200X-Fr…...

编程日记 2025/9/13 1:58:23

TCP基本入门-简单认识一下什么是TCP

部分内容来源：小林Coding TCP的特点 1.面向连接一定是“一对一”才能连接，不能像 UDP 协议可以一个主机同时向多个主机发送消息，也就是一对多是无法做到的 2.可靠的无论的网络链路中出现了怎样的链路变化，TCP 都可以保证一个…...

编程日记 2025/9/10 0:33:38

计算机科学技术领域的内卷现状与应对措施分析

计算机科学技术领域的内卷现状与应对措施分析李升伟整理 ### 计算机科学技术领域的内卷现状与应对措施分析 #### 一、内卷现状分析 1. **教育与升学内卷** 计算机科学与技术相关专业（如计算机科学与技术、人工智能、大数据等）已成为考研竞争最…...

编程日记 2025/9/7 22:03:16

The First项目报告：VANA如何重塑数据所有权与AI训练

在当今的数字化时代，数据已成为比黄金更为珍贵的资源。科技巨头们通过收集和分析用户的个人数据，获得巨大的商业利益，而用户却往往没有从中得到应有的回报。这种数据的不对等交易和隐私侵犯现象，成为了现代社会的一个严重问题。 …...

编程日记 2025/9/11 13:38:06

pnpm的基本用法

以下是 pnpm 的核心命令和使用指南，涵盖从安装依赖到项目管理的常见操作： 1. 基础命令 (1) 安装依赖 pnpm install # 安装 package.json 中的所有依赖 pnpm install <包名> # 安装指定包（自动添加到 dependencies&#xf…...

编程日记 2025/9/11 19:42:01

机试刷题_从上往下打印二叉树【python】

从上往下打印二叉树 # class TreeNode: # def __init__(self, x): # self.val x # self.left None # self.right None # # 代码中的类名、方法名、参数名已经指定，请勿修改，直接返回方法规定的值即可 # # # param root …...

编程日记 2025/9/13 12:42:05

转化率(漏斗分析)——mysql计算过程

转化率(漏斗分析)——mysql计算过程问题：有一张表，记录了不同用户的用户id，浏览页面时间，加入购物车时间，下单时间，支付时间，算出每天的各个环节的转化率创建表info(含用户id，浏…...

编程日记 2025/9/9 3:05:40

《AI和人工智能和编程日报》

OpenAI：将深度研究扩展到 ChatGPT Plus、Team、Edu 和 Enterprise 用户，每月 10 次查询；Pro 用户每月有 120 次查询，ChatGPT 语音模式向免费用户开放。DeepSeek：R1 大模型宣布降价，调用价格将至四分之一&am…...

编程日记 2025/9/13 9:01:51

自然语言处理：稀疏向量表示

介绍大家好，我是博主。今天又来和大家分享自然语言处理领域的知识了。原本我计划这次分享NLP中文本表示的相关内容，不过在整理分享计划的过程中，发现这部分知识里包含一些涉及复杂数学原理和抽象概念的内容。对于刚接触NLP的小伙伴们来说&a…...

编程日记 2025/9/7 19:09:35

矩阵 trick 系列题解

1.AT_dp_r Walk（矩阵图论） 题意一个有向图有 n n n 个节点，编号 1 1 1 至 n n n。给出一个二维数组 A 1... n , 1... n A_{1...n,1...n} A1...n,1...n，若 A i , j 1 A_{i,j}1 Ai,j1 说明节点 i i i 到节点 j j j …...

编程日记 2025/9/9 3:18:47

视频字幕识别和翻译

下载的视频很多不是汉语的，我们需要用剪映将语音识别出来作为字幕压制到视频中去。剪映6.0以后语音识别需要收费，但是低版本还是没有问题。如果想要非汉语字幕转成中文，剪映低版本不提供这样功能。但是，用剪映导出识别字幕&am…...

编程日记 2025/9/2 12:26:00

C++ 快速学习教程

文章目录一、基础语法篇1. 开发环境搭建2. 程序结构3. 基础数据类型4. 流程控制二、面向对象编程1. 类与对象2. 构造函数与析构函数3. 继承与多态4. 运算符重载三、高级特性1. 模板编程2. 异常处理3. 命名空间4. 类型推导（auto/decltype） 四、标准库与…...

编程日记 2025/9/12 4:25:45

LlamaFactory-webui：训练大语言模型的入门级教程

LlamaFactory是一个开源框架，支持多种流行的语言模型，及多种微调技术，同时，以友好的交互式界面，简化了大语言模型的学习。本章内容，从如何拉取，我已经搭建好的Llamafactory镜像开始&#xff0…...

编程日记 2025/9/10 18:49:22

ros安装rqt_joint_trajectory_controller

有时候，我们可以看到别人的代码里面有这个，但是这个是需要安装的。 <node name"gui_controller" pkg"rqt_joint_trajectory_controller" type"rqt_joint_trajectory_controller" />sudo apt-get install ros-noeti…...

编程日记 2025/9/10 7:56:04

PXE批量网络装机与Kickstart自动化安装工具

目录一、系统装机的原理 1.1、系统装机方式 1.2、系统安装过程二、PXE批量网络装机 2.1、PXE实现原理 2.2、搭建PXE实际案例 2.2.1、安装必要软件 2.2.2、搭建DHCP服务器 2.2.3、搭建TFTP服务器 2.2.4、挂载镜像并拷贝引导文件到tftp服务启动引导文件夹下 2.2.5、编…...

编程日记 2025/9/10 6:59:34

使用vscode导出Markdown的PDF无法显示数学公式的问题

我的硬件环境是M2的MacBook air，在vscode中使用了Markdown PDF来导出md文件对应的PDF。但不管导出html还是PDF文件，数学公式都是显示的源代码。我看了许多教程，给的是这个方法：在md文件对应的html文件中加上以下代码&#xff1a…...

编程日记 2025/8/30 20:10:53

SpringBoot 热部署

1、添加 DevTools 依赖  <dependency> <groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId> </dependency>2、在IDEA的菜单栏中依次选择“File”→“Settings”&#x…...

编程日记 2025/9/9 21:19:23

sqlmap：自动SQL注入和数据库接管工具

SQL 注入攻击是 Web 安全领域最常见的漏洞之一，今天给大家介绍一个自动化 SQL 注入和数据库接管工具：sqlmap。sqlmap 作为一款开源渗透测试工具，能帮助安全测试人员快速发现并利用 SQL 注入漏洞接管数据库服务器。功能特性 sqlmap 使用 Pyt…...

编程日记 2025/9/9 13:44:19

labview中VISA串口出现异常的解决方案

前两天在做项目时发现，当用VISA串口读取指令时出现了回复异常的情况，不管发什么东西就一直乱回，针对这个情况，后面在VISA串口中加了一个VISA寄存器清零的函数。加了之后果然好多了，不会出现乱回的情况，但是…...

编程日记 2025/9/12 7:56:25

x64汇编下过程参数解析

简介好久没上博客, 突然发现我的粉丝数变2700了, 真是这几个月涨的粉比我之前好几年的都多, 于是心血来潮来写一篇, 记录一下x64下的调用约定(这里的调用约定只针对windows平台) Windows下的x64程序的调用约定有别于x86下的"stdcall调用约定"以及"cdecl调用约…...

编程日记 2025/9/13 17:00:19

JavaScript 系列之：垃圾回收机制

前言垃圾回收是一种自动内存管理机制，用于检测和清除不再使用的对象，以释放内存空间。当一个对象不再被引用时，垃圾回收器会将其标记为垃圾，然后在适当的时候清除这些垃圾对象，并将内存回收给系统以供其他对象使用。…...

编程日记 2025/9/13 20:15:54

18.6 大语言模型可解释性解密：打开AI黑箱的关键技术

大语言模型可解释性解密：打开AI黑箱的关键技术关键词：模型可解释性, 注意力机制分析, 特征可视化, 探针技术, AI透明度 1. 可解释性核心价值与挑战大模型可解释性研究致力于破解"输入-输出"间的认知黑箱，其技术价值可概括为： #mermaid-svg-oF7xAEMTxnQZ6mF7 …...

编程日记 2025/8/22 7:25:19

Jmeter接口自动化测试读取用例

一：环境准备 1.下载jxl.jar这个jar包 2.下载好之后，放到Jmeter的安装路径下的lib目录下 3.jxl.jar的作用：完成对Excel的读写以及修改操作如何利用jmter操作excel的思路分析： 1，Excell一般有三个最重要的元素&…...

编程日记 2025/9/13 20:05:01

es 写入数据的工作原理是什么啊？es 查询数据的工作原理是什么啊？底层的 lucene 介绍一下呗？倒排索引了解吗？

Elasticsearch 写入数据的工作原理 1. 写入流程概述当客户端向 Elasticsearch 发送写入请求时，会经历以下步骤： 客户端选择一个节点作为 coordinating node（协调节点），发送请求。协调节点对文档进行路由&#xff…...

编程日记 2025/9/11 11:03:39

npm : 无法加载文件 E:\ProgramFiles\Nodejs\npm.ps1，因为在此系统上禁止运行脚本。

这个错误是因为 Windows 系统的 PowerShell 执行策略限制了脚本的运行。默认情况下，PowerShell 的执行策略是 Restricted，即禁止运行任何脚本。以下是解决该问题的步骤： 1. 检查当前执行策略打开 PowerShell（管理员权限&#x…...

编程日记 2025/9/8 4:19:13

Spark map与mapPartitions算子源码级深度解析

Spark map与mapPartitions算子源码级深度解析一、核心源码结构差异 1. map算子实现逻辑 def map[U: ClassTag](f: T => U): RDD[U] = withScope {val cleanF = sc.clean(f)new MapPartitionsRDD[U, T](this, (context, pid, iter) => iter.map(cleanF)) }实现特征： …...

编程日记 2025/9/13 19:36:23

Docker搭建基于Rust语言的云原生可观测平台OpenObserve

文章目录前言1. 安装Docker2. 创建并启动OpenObserve容器3. 本地访问测试4. 公网访问本地部署的OpenObserve4.1 内网穿透工具安装4.2 创建公网地址 5. 配置固定公网地址前言嘿，朋友们，今天我们要聊聊一个能让你在云原生世界里大展身手的秘密武器——…...

编程日记 2025/9/10 6:04:26

论文阅读：A comprehensive survey on model compression and acceleration

对模型压缩和加速的全面调查阅读论文：A comprehensive survey on model compression and acceleration 摘要背景：近年来，机器学习（ML）和深度学习（DL）在计算机视觉、自然语言处理、股票预测…...

编程日记 2025/9/12 16:02:47

IO流（师从韩顺平）

文章目录文件什么是文件文件流常用的文件操作创建文件对象相关构造器和方法应用案例获取文件的相关信息应用案例目录的操作和文件删除应用案例 IO 流原理及流的分类Java IO 流原理IO流的分类 IO 流体系图-常用的类IO 流体系图（重要！！&…...

编程日记 2025/9/13 0:06:08

Ubuntu+deepseek+Dify本地部署

1.deepseek本地部署在Ollama官网下载需要魔法下载 curl -fsSL https://ollama.com/install.sh | sh 在官网找到需要下载的deepseek模型版本复制命令到终端 ollama run deepseek-r1:7b 停止ollama服务 sudo systemctl stop ollama # sudo systemctl stop ollama.servi…...

编程日记 2025/9/13 6:31:31

Java类中的this操作

在Java中，`this` 是一个关键字，用于引用当前对象的实例。它通常在类的方法或构造器中使用，主要有以下几种用途： 1. 区分成员变量和局部变量当成员变量与局部变量同名时，使用 `this` 可以明确引用当前对象的成员变量。 public class Person { private String name; …...

编程日记 2025/9/11 7:24:25

云创智城YunCharge 新能源二轮、四轮充电解决方案（云快充、万马爱充、中电联、OCPP1.6J等多个私有单车、汽车充电协议）之新能源充电行业系统说明书

云创智城YunCharge 新能源充电行业系统说明书 ⚡官方文档 ⚡官网地址 1. 引言随着全球环境保护和能源危机的加剧，新能源汽车行业得到了快速发展，充电基础设施建设也随之蓬勃发展。新能源充电行业系统旨在提供高效、便捷的充电服务，满足电…...

编程日记 2025/9/9 17:51:53

利用STM32TIM自制延迟函数实验

一、实验目的掌握STM32定时器（TIM）的工作原理及配置方法学习使用HAL库实现微秒级/毫秒级延时函数理解定时器中断服务程序的编写规范二、实验原理定时器基础： STM32定时器包含向上计数器、向下计数器、中心对齐模式通过预分频器&#x…...

编程日记 2025/9/13 22:17:26

【STM32F103ZET6——库函数】6.PWM

目录配置PWM输出引脚使能引脚时钟配置PWM 使能PWM 配置定时器使能定时器时钟使能定时器例程例程说明 main.h main.c PWM.h PWM.c led.h led.c DSQ.h DSQ.c 配置PWM输出引脚 PWM的输出引脚必须配置为复用功能。注意：需要使用哪个引脚&…...

编程日记 2025/9/9 10:47:05

RabbitMQ系列（四）基本概念之Exchange

在 RabbitMQ 中，Exchange（交换机） 是消息路由的核心组件，负责根据规则将生产者发送的消息分发到对应的队列（Queue）中。以下是其核心功能与分类的详细说明： 一、Exchange 的核心作用消息路由枢…...

编程日记 2025/9/8 6:53:54

解决“ReadTimeoutError:HTTPSConnectionPool”pip安装超时问题

安装pytorch时，出现如下报错信息： pip._vendor.urllib3.exceptions.ReadTimeoutError:HTTPSConnectionPool(host‘files.pythonhosted.org’, port443): Read timed out. 这是由于网络等各种原因导致安装超时引发的，可以按如下方式手动设置延…...

编程日记 2025/9/8 17:49:56

SAP中的屏幕PBO和PAI事件

PBO中的O,OUT,输出，和屏幕显示有关，比如屏幕元素的隐藏与显示，屏幕元素的输入状态的控制。例如，控制屏幕所有元素为只读模式 LOOP AT SCREEN.SCREEN-INPUT 0.MODIFY SCREEN. ENDLOOP.PAI中的I,IN,输入，和屏幕输入有…...

编程日记 2025/9/9 0:31:59

Linux 环境“从零”部署 MongoDB 6.0：mongosh 安装与数据操作全攻略

前提完成linux平台部署MongoDB【部署教程】且完成mongosh的安装由于本人使用的是6.0版本的MongoDB，新版本 MongoDB（尤其是 6.0 及以上版本）已经不再默认捆绑传统的 mongo shell，而改用新的 MongoDB Shell（mongosh&am…...

编程日记 2025/9/12 9:51:29

Ubuntu 下 nginx-1.24.0 源码分析 - ngx_init_cycle 函数 - 详解（4）

详解（4） 初始化配置转储结构（config_dump） if (ngx_array_init(&cycle->config_dump, pool, 1, sizeof(ngx_conf_dump_t))! NGX_OK){ngx_destroy_pool(pool);return NULL;}ngx_rbtree_init(&cycle->config_dump_rb…...

编程日记 2025/9/10 11:41:45

Eclipse 编译项目指南

Eclipse 编译项目指南引言 Eclipse 是一款功能强大的集成开发环境（IDE），广泛用于Java、C/C、Python等多种编程语言的开发。在Eclipse中编译项目是进行软件开发的基础步骤。本文将详细介绍如何在Eclipse中编译项目，包括项目设置…...

编程日记 2025/9/9 21:39:56

实现 Leaflet 多类型点位标记与聚合功能的实战经验分享

在现代的地理信息系统（GIS）应用中，地图功能是不可或缺的一部分。无论是展示商业网点、旅游景点还是公共服务设施，地图都能以直观的方式呈现数据。然而，当数据量较大时，地图上可能会出现大量的标记点&#x…...

编程日记 2025/9/11 0:35:02

C高级——shell(3)

一、shell的选择结构 1.回顾：C语言的选择结构:if , if else if ,if else,switch （switch的执行速度最快） 2.shell的选择结构： 单分支if 双分支 if else 多分支if elif case..in 1.1 shell的选择结构的格式 --------C语言的格式--…...

编程日记 2025/9/10 4:51:45

Qt 中，**信号与槽（Signals Slots）机制

在 Qt 中，信号与槽（Signals & Slots）机制是实现对象间通信的核心模式，通常也被视为一种高效的“通知者模式”。它允许对象在特定事件发生时通知其他对象，且完全解耦。核心概念信号（Signal&#xff0…...

编程日记 2025/9/8 16:42:34

字符串复制函数strcpy()的使用仿写strcpy()——C语言

strcpy 函数是C语言标准库中的字符串处理函数，用于将一个字符串复制到另一个字符串中。 char *strcpy(char *dest, const char *src); dest 是目标字符串的指针，用于存储复制后的字符串。 src 是源字符串的指针，指向要被复制的字符串。 st…...

编程日记 2025/9/13 16:32:05

想知道两轮差速方形底盘 URDF 咋做，ROS2 配 Rviz 咋显示吗？看这里！

视频讲解想知道两轮差速方形底盘 URDF 咋做，ROS2 配 Rviz 咋显示吗？看这里！ 模型概述一个方形底盘和两个差速驱动轮 URDF 代码 <?xml version"1.0" encoding"utf-8"?> <robot name"diff"> …...

编程日记 2025/9/8 22:46:48

什么是Ollama？什么是GGUF？二者之间有什么关系？

一、Ollama：本地化大模型运行框架 Ollama 是一款开源工具，专注于在本地环境中快速部署和运行大型语言模型（LLM）。它通过极简的命令行操作简化了模型管理流程，支持离线运行、多模型并行、私有化部署等场景。核心特性本地化运行：无需依赖云端API，用户可在个人电脑或服务…...

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

相关文章：