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

vue element使用el-table时，切换tab，table表格列项发生错位问题

article 2025/10/13 18:46:56

展示问题

在这里插入图片描述

问题描述：使用el-table的fixed="right"属性后，如果切换tab时，回出现最后一列错误的问题

官网提供解决方法：doLayout

在这里插入图片描述

  • 需要注意的事项：我这里是通过组件使用的table组件，涉及多层组件封装问题，所以找这个根组件ref找到doLayout方法的时候需要注意写法 （如果存在组件签套，记得多加几次$refs[refName]调用方法）
<el-tabs v-model="searchParam.activeName" @tab-click="handleClick"><el-tab-pane label="统计" name="first"><leftTableref="leftTableRef":table-data-list="gateStatisticsListTable":table-all="gateStatisticsListTableAll":count="tableDataCount":search-param="searchParam"@refresh="refresh"@export-all="exportAll"@change-page="changePage" /></el-tab-pane><el-tab-pane label="明细" name="second"><rightTableref="rightTableRef":table-data-list="gateStatisticsListTable":table-all="gateStatisticsListTableAll":count="tableDataCount":search-param="searchParam"@refresh="refresh"@export-all="exportAll"@change-page="changePage" /></el-tab-pane>
</el-tabs>

 handleClick(tab, event) {this.$nextTick(() => {if (this.searchParam.activeName === 'first') {const that = this// 其中leftTableRef是el-table的refthat.$refs.leftTableRef.$refs.tableRef.doLayout()// 切换 tab请求接口this.queryData()}if (this.searchParam.activeName === 'second') {// 其中rightTableRef是el-table的refconst that = thisthat.$refs.rightTableRef.$refs.tableRef.doLayout()// 切换 tab请求接口this.queryData()}})
},

修改后的效果展示：在这里插入图片描述

相关文章：

vue element使用el-table时，切换tab，table表格列项发生错位问题

展示问题 问题描述&#xff1a;使用el-table的fixed"right"属性后&#xff0c;如果切换tab时&#xff0c;回出现最后一列错误的问题 官网提供解决方法&#xff1a;doLayout 需要注意的事项&#xff1a;我这里是通过组件使用的table组件&#xff0c;涉及多层组件封装…...

编程日记 2025/10/6 2:02:25

第十二章 Python语言-大数据分析PySpark（终）

目录 一. PySpark前言介绍 二.基础准备 三.数据输入 四.数据计算 1.数据计算-map方法 2.数据计算-flatMap算子 3.数据计算-reduceByKey方法 4.数据计算-filter方法 5.数据计算-distinct方法 6.数据计算-sortBy方法 五.数据输出 1.输出Python对象 &#xff08;1&am…...

编程日记 2025/10/11 17:07:49

【RedisLockRegistry】分布式锁

RedisLockRegistry分布式锁 介绍 RedisLockRegistry‌是Spring框架提供的一种分布式锁机制&#xff0c;它基于Redis来实现对共享资源的保护&#xff0c;防止多个进程同时对同一资源进行修改&#xff0c;从而避免数据不一致或其他问题‌ 基本原理 RedisLockRegistry通过Redi…...

编程日记 2025/5/24 5:17:34

leetcode-排序

排序 面试题 01.01. 判定字符是否唯一 题目 实现一个算法&#xff0c;确定一个字符串 s 的所有字符是否全都不同。 示例 1&#xff1a; 输入: s "leetcode" 输出: false 示例 2&#xff1a; 输入: s "abc" 输出: true限制&#xff1a; 0 < len(s) &…...

编程日记 2025/7/19 7:03:44

AD相同网络的铜皮和导线连接不上

出现这样的情况是不是很烦恼&#xff0c;明明是相同的网络连接不上&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f; 直接修改铜皮属性&#xff08;选择所有相同这个选项&#xff09; 这样就可以连接上了...

编程日记 2025/9/25 21:09:36

keil修改字体无效，修改字体为“微软雅黑”方法

在网上下载了微软雅黑字体&#xff0c;微软雅黑参考下载链接 结果在Edit->Configuration中找不到这个字体 这个时候可以在keil的安装目录中找到UV4/global.prop文件 用记事本打开它进行编辑&#xff0c;把字体名字改成微软雅黑 重新打开keil就发现字体成功修改了。 这个…...

编程日记 2025/9/29 14:23:00

【网络编程】从零开始彻底了解网络编程(三)

本篇博客给大家带来的是网络编程的知识点. &#x1f40e;文章专栏: JavaEE初阶 &#x1f680;若有问题 评论区见 ❤ 欢迎大家点赞 评论 收藏 分享 如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 王子,公主请阅&#x1f680; 要开心要快乐顺便进步 TCP流…...

编程日记 2025/10/7 22:44:07

NVIDIA --- 端到端自动驾驶

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、传统驾驶模型二、NVIDIA的端到端驾驶模型1.基本模型2.自查讯向量3.通用框架 总结 前言 端到端自动驾驶指的是系统接收来自摄像头雷达和激光雷达的原始传感…...

编程日记 2025/10/12 5:05:37

关于在Springboot中设置时间格式问题

目录 1-设置全局时间格式1.Date类型的时间2.JDK8时间3.使Date类和JDK8时间类统统格式化时间 2-关于DateTimeFormat注解 1-设置全局时间格式 1.Date类型的时间 对于老项目来说&#xff0c;springboot中许多类使用的是Date类型的时间&#xff0c;没有用到LocalDateTime等JDK8时…...

编程日记 2025/9/21 0:24:37

CSRF请求伪造

该漏洞主要是关乎于用户&#xff0c;告诫用户不可乱点击链接&#xff0c;提升自我防范&#xff0c;才能不落入Hacker布置的陷阱&#xff01; 1. cookie与session 简单理解一下两者作用 1.1. &#x1f36a; Cookie&#xff1a;就像超市的会员卡 存储位置&#xff1a;你钱包里…...

编程日记 2025/10/6 13:17:01

（一）单机架构、应用数据分离架构、应用服务集群架构

文章目录 明确为什么要学习架构的演进单机架构什么是单机架构单机架构的模型单机架构的优缺点优点缺点 单机架构的技术案例 应用数据分离架构什么是应用数据分离架构架构模型应用数据分离架构的优缺点优点缺点 技术案例 应用服务集群架构什么是应用服务集群架构架构模型应用服务…...

编程日记 2025/10/4 17:30:14

Python数据分析案例72——基于股吧评论数据的情感分析和主题建模(LDA)

背景 好久没更新了&#xff0c;最近忙其他去了。最近股市波动太大&#xff0c;看了不少新闻的评论。抽空写了个股吧评论数据的LDA建模和情感分析&#xff0c;简单写到博客上来更新一下。 数据来源 上证指数(000001)股吧_上证指数怎么样_分析讨论社区— 数据来源上述网站的东…...

编程日记 2025/10/12 9:09:49

Git分支管理方案

成都众望智慧有限公司Git分支管理方案 采用 轻量级Git Flow 敏捷版本控制策略&#xff0c;在保证稳定性的同时提升开发效率。以下是优化后的方案&#xff1a; 1. 精简分支模型&#xff08;相比6-8人团队减少分支层级&#xff09; 分支类型作用生命周期devops生产环境代码&am…...

编程日记 2025/9/26 7:08:20

力扣-160.相交链表

题目描述 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;函数返…...

编程日记 2025/10/10 22:20:39

c语言中float和double 类型的区别

在 C 语言里&#xff0c;float和double都用于表示浮点数&#xff0c;不过二者在多个方面存在差异&#xff0c;下面为你详细介绍&#xff1a; 1. 存储空间大小 在 C 语言中&#xff0c;数据类型所占用的存储空间大小通常与编译器和系统架构有关&#xff0c;但一般来说&#xf…...

编程日记 2025/10/13 14:58:15

【C++】特殊类的设计、单例模式以及Cpp类型转换

&#x1f4da; 博主的专栏 &#x1f427; Linux | &#x1f5a5;️ C | &#x1f4ca; 数据结构 | &#x1f4a1;C 算法 | &#x1f152; C 语言 | &#x1f310; 计算机网络 上篇文章&#xff1a; C 智能指针使用&#xff0c;以及shared_ptr编写 下篇文章&#xff…...

编程日记 2025/10/12 13:47:53

050_基于springboot的音乐网站

一、系统架构 前端&#xff1a;vue | element-ui | html | jquery | css | ajax 后端&#xff1a;springboot | mybatis 环境&#xff1a;jdk1.8 | mysql | maven | nodejs | idea 二、代码及数据 三、功能介绍 01. web端-注册 02. web端-登录 03. web…...

编程日记 2025/9/29 21:37:15

全局变量Msg.sender

msg.sender 在 Solidity 中&#xff0c;有一些全局变量可以被所有函数调用。 其中一个就是 msg.sender&#xff0c;它指的是当前调用者&#xff08;或智能合约&#xff09;的 address。 注意&#xff1a;在 Solidity 中&#xff0c;功能执行始终需要从外部调用者开始。 一个合…...

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

【论文阅读】平滑量化：对大型语言模型进行准确高效的训练后量化

论文题目&#xff1a;SmoothQuant: Accurate and Efficient Post-Training Quantization for Large Language Models 论文地址&#xff1a;[2211.10438] SmoothQuant: Accurate and Efficient Post-Training Quantization for Large Language Models 代码地址&#xff1a;http…...

编程日记 2025/10/9 11:15:48

【资料推荐】LVDS Owner’s Manual

一份年代有些久远的技术资料&#xff0c;但是内容全面且经典&#xff01; 本用户手册提供了很多有用的信息&#xff0c;首先简要概述了三种最常见的高速接口技术&#xff1a;LVDS&#xff08;包括B-LVDS和M-LVDS&#xff09;、CML和LVPECL&#xff0c;并对其相应的特性进行了分…...

编程日记 2025/10/5 13:48:06

ARM Cortex-M (STM32)如何调试HardFault

目录 步骤 1: 实现一个有效的 HardFault 处理程序 步骤 2: 复现 HardFault 并使用调试器分析 步骤 3: 解读故障信息 步骤 4: 定位并修复源代码 HardFault 是 ARM Cortex-M 处理器中的一种异常。当处理器遇到无法处理的错误&#xff0c;或者配置为处理特定类型错误&#xff…...

编程日记 2025/10/10 22:52:39

黑马 redis面试篇笔记

redis主从 version: "3.2"services:r1:image: rediscontainer_name: r1network_mode: "host"entrypoint: ["redis-server", "--port", "7001"]r2:image: rediscontainer_name: r2network_mode: "host"entrypoint:…...

编程日记 2025/10/12 8:09:17

Docker端口映射与容器间DNS发现：打通服务通信的任督二脉

Docker端口映射与容器间DNS发现&#xff1a;打通服务通信的任督二脉 一、端口映射深度解析1.1 端口映射核心机制映射规则语法&#xff1a; 1.2 高级映射技巧批量端口映射&#xff1a;查看端口绑定状态&#xff1a; 二、容器间服务发现机制2.1 自定义网络DNS体系DNS解析特性&…...

编程日记 2025/9/16 0:30:33

DBdriver使用taos数据库

首先创建连接 连接后比如数据库里有三个库 选择其中的hypon 选中localhost&#xff0c;右键sql编辑器&#xff0c;打开sql控制台 就插入了一条数据...

编程日记 2025/9/29 21:03:50

观成科技：摩诃草组织Spyder下载器流量特征分析

一、概述 自2023年以来&#xff0c;摩诃草组织频繁使用Spyder下载器下载远控木马&#xff0c;例如Remcos。观成安全研究团队对近几年的Spyder样本进行了深入研究&#xff0c;发现不同版本的样本在数据加密、流量模式等方面存在差异。基于此&#xff0c;我们对多个版本样本的通…...

编程日记 2025/10/4 17:11:03

AIGC实战之如何构建出更好的大模型RAG系统

一、RAG 系统核心架构解析 1. 检索模块深度优化 1.1 混合检索技术实现 技术原理&#xff1a;结合稀疏检索&#xff08;BM25&#xff09;与密集检索&#xff08;DPR&#xff09;&#xff0c;通过动态权重分配提升检索精度。例如&#xff0c;在医疗领域&#xff0c;BM25 负责精…...

编程日记 2025/9/29 20:10:51

C++入门小馆: 深入了解STLlist

嘿&#xff0c;各位技术潮人&#xff01;好久不见甚是想念。生活就像一场奇妙冒险&#xff0c;而编程就是那把超酷的万能钥匙。此刻&#xff0c;阳光洒在键盘上&#xff0c;灵感在指尖跳跃&#xff0c;让我们抛开一切束缚&#xff0c;给平淡日子加点料&#xff0c;注入满满的pa…...

编程日记 2025/10/10 8:36:52

【Git】Fork和并请求

当你在 GitHub 或其他代码托管平台上 Fork 了一个项目后&#xff0c;你可以基于你的 Fork 进行开发&#xff0c;并通过 Pull Request&#xff08;PR&#xff09; 的方式将你的更改提交给原始项目&#xff08;也称为上游仓库&#xff09;。以下是完整的流程和步骤&#xff1a; 1…...

编程日记 2025/9/25 9:51:24

小白学习java第15天：JDBC

1.数据库驱动 想一下我们之前是怎么操作数据库&#xff0c;是不是使用SQL语句对其mysql数据库管理系统&#xff0c;然后管理系统在进行数据库&#xff08;硬盘文件里面的&#xff09;进行操作。那么我现在想使用应用程序对其数据库进行操作&#xff0c;应该怎么办呢&#xff1…...

编程日记 2025/10/5 11:51:52

大模型应用开发（PAFR）

Prompt问答 特征:利用大模型推理能力完成应用的核心功能 应用场景&#xff1a; 文本摘要分析 舆情分析 坐席检查 AI对话 AgentFunction Calling 特征&#xff1a;将应用端业务能力与AI大模型推理能力结合&#xff0c;简化复杂业务功能开发 应用场景: 旅行指南 数据…...

编程日记 2025/10/2 3:35:27