解决vxe-table的表头动态渲染第一次不显示

2023-05-16

问题描述:

vxe-table表头当使用了<vxe-colgroup>(二级/多级表头),设一级表头写死,二级表头动态加载,那么每次赋值二级表头时,值赋上去了,页面不响应,第一次加载不渲染。

为什么会这样?

vxe-table数据响应是根据v-for的key进行检索,如果一级表头key不变,那么就不会重新渲染

解决方法:

给最外层的的for循环的key加随机数,即:key="index+Math.random()",每次渲染时,一级表头绑定的key都是不一样,那么就渲染成功啦(Math.round(Math.random() * 1000))一个整数

(给key加了随机数,如果表格是可以有部分是编辑的输入框,可能会出现,输入一次后鼠标会失焦,解决方法:不要直接把随机数加在:key上,用一个变量从父组件传进来,默认是0,当父组件的动态渲染完成后,执行一次Math.round(Math.random() * 1000),理由:(我猜的)当在输入一次的时候,表头是的key会再次随机,那么就是重新渲染,即会造成失焦,可能是直接换了一个dom)

如果觉得进入页面等一点点时间,表头才变,可以给<vxe-table>加:loading="loading",即在渲染时,设true,渲染完成后设false

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

解决vxe-table的表头动态渲染第一次不显示 的相关文章

  • CSS 元素垂直居中的 6种方法

    转自 http blog zhourunsheng com 2012 03 css E5 85 83 E7 B4 A0 E5 9E 82 E7 9B B4 E5 B1 85 E4 B8 AD E7 9A 84 6 E7 A7 8D E6 9
  • 多表可更新视图的实现

    多表关联后的数据能保证主键唯一的视图是可直接做更新 不需要用触发器实现 多表视图的定义 当视图的数据源只有一张数据表 则该视图为单表视图 当视图的数据源是多张数据表 则该视图为多表视图 可更新视图的定义 在绝大多数人的概念中 视图是只读的
  • OpenGL错误总结

    const char getGLErrorInfo int errorId switch errorId case GL INVALID ENUM return GL Invalid Enum n case GL INVALID VALUE
  • SQL Server学习之复合索引

    概要什么是单一索引 什么又是复合索引呢 何时新建复合索引 复合索引又需要注意些什么呢 本篇文章主要是对网上一些讨论的总结 一 概念单一索引是指索引列为一列的情况 即新建索引的语句只实施在一列上 用户可以在多个列上建立索引 这种索引叫做复合索
  • 中断INT 0x80的作用[转自csdn blog]

    当进程执行系统调用时 先调用系统调用库中定义某个函数 该函数通常被展开成前面提到的 syscallN的形式通过INT 0x80来陷入核心 其参数也将被通过寄存器传往核心 在这一部分 我们将介绍INT 0x80的处理函数system call
  • bin和elf文件(ARM) 五

    原文地址 http www iteye com topic 1121480 近段时间在研究Erlang核心特性的实现 也许过段时间会有个系列的总结 期待 今天看到有人写一个深入Hello World的文章 想起来读研的时候做的一个关于程序加
  • [SQL]经典的sql语句

    一 基础 1 说明 创建数据库 CREATE DATABASE database name 2 说明 删除数据库 drop database dbname 3 说明 备份sql server 创建 备份数据的 device USE mast
  • 跨库的触发器

    CREATE TRIGGER addtomsgdown ON dbo TABLE1 FOR INSERTASdeclare usernumber as varchar 11 declare messagecontent as varchar
  • [转]:如何让PowerDesigner支持自动生成含SQL Server 2000的表和列注释

    如何让PowerDesigner支持自动生成含SQL Server 2000的表和列注释的角本 PowerDesigner是Sybase公司著名的产品 我从16 bit的windows开始 就接触并使用这个工具 应该说是有很深的感情 Pow
  • Oracle中没有 if exists(...)

    对于Oracle中没有 if exists 的语法 目前有许多种解决方法 这里先分析常用的三种 推荐使用最后一种 第一种是最常用的 判断count 的值是否为零 如下 declare v cnt number begin select co
  • Web前端-Vue ElementUI点击Table 索引行获取index处理

    需求 在table中row行 index 0 作为区头 数据字符展示 参考组件 Element The world s most popular Vue UI framework 1 table中有一个 row class name tab
  • HTML表格(table)实例

    实例1 课程表 table border 1 width 60 cellpadding 2 caption 课程表 caption tr align center td 时间 日期 td td 一 td tr table
  • Geant4程序的一点技巧总结 2

    4 关于获得粒子状态 获得粒子的总能量 G4Track pTrack pStep gt GetTrack const G4DynamicParticle pParticle pTrack gt GetDynamicParticle pPar
  • 编程器烧写NAND flash的一些说明

    注意事项 1 大小端模式 也即在使用编程器时需不需要做字节反序 2 Spare area处理方式 需要还是不需要 是否含有私有ECC算法 3 坏块处理方式 摘要一段说明如下 虽然针对西尔特SUPERPRO 9000U的文章 但也对许多其他的
  • 存储过程进行数据合并导入

    CREATE PROCEDURE sp mytest1 mytype int AS declare pro varchar 50 declare pro1 varchar 50 select pro typename from table1
  • Create Ms Word doc using Javascript And vbscript .

  • vue_elementui_formatter的使用方法_elementui提取table表格使用formatter方法

    后台管理系统中用到了非常多的表格 一般为了方便都会讲表格进行提取 形成公共组件 提取表格时会遇到返回的json数据中要对单个字段进行处理 如时间戳转换 状态转换等 封装的表格组件代码
  • 512色色谱图

    代码如下
  • CSS中设置表格TD宽度的问题

    CSS布局 表格宽度不听使唤的实例 想把表格第一例宽度设为20 其他自适应 但CSS中宽度是等宽的 只设这一行也不起作用 但是在实际应用中总是等宽处理 并不按照样式来走 XML HTML代码
  • sql ntext數據類型字符替換

    ntext數據類型字符替換 2011 08 21 塗聚文 create table tt sid INT IDENTITY 1 1 cont ntext go insert into tt cont values N fd sad fdsa

随机推荐

  • 【计算机网路】(3)网络层:IP地址组成、分类,子网划分

    目录 IP地址 xff08 32位 xff09 1 1 组成 1 2 分类 1 2 1 A B C三类IP地址的组成 1 2 2 私有地址 记 1 3 子网掩码 1 3 1 示例 求IP地址为192 168 1 0的网络号 1 4 DHCP
  • 【知识图谱】知识图谱入门详细介绍

    知识图谱 入门与介绍 文章目录 知识图谱 入门与介绍1 引言2 概念3 分类4 发展历程5 作用5 1 搜索5 2 问答5 3 辅助大数据分析 6 知识图谱的构建6 1 数据获取6 2 信息 xff08 知识 xff09 抽取6 3 知识融
  • vnc服务器配置—linux

    VNC服务器配置 vnc服务器是个远程控制服务器 需求 xff1a 在linux中装服务器端 xff0c 在windows中装客户端 xff0c 使得可以远程控制linux 首先下载vnc服务器 yum install tigervnc s
  • 18715 出栈序列

    18715 出栈序列 时间限制 1000MS 代码长度限制 10KB 提交次数 0 通过次数 0 题型 编程题 语言 不限定 Description 一种简洁的栈定义方法如下 int st 1000 top 61 0 以top作为栈顶指针
  • Ubuntu 打不开终端

    因为我在做python时做了应该是删除了软连接 xff0c 然后终端就打不开了 在网上寻找多个方法 xff0c 终于找到适合自己的 请注意 xff0c 这里可能会出现其他问题 xff0c 使用时请注意 因为进不去终端 xff0c 所以按ct
  • unity实现切割图片

    我们在找资源时有时候会遇到把一堆图片放进一张图片的情况 xff0c 往往需要将一块块小图片切割出来使用 xff1a 步骤 xff1a xff08 1 xff09 将Sprite Mode设置为Multiple 2 xff09 点击Sprit
  • 使用mybatis实现数据库插入数据

    xff08 1 xff09 在Dao层的实体类接口中添加相应函数 xff08 2 xff09 在相应的 xml文件中加入一个mapper标记 xff08 3 xff09 修改main 函数中的语句 xff0c 关键是修改了sqlId 修改指
  • 计算机图形学(三维观察投影线、视图变换、投影变换)

    一 三维观察流水线 概念 xff1a 将建立的三维场景显示在二维视口的过程称为三维观察流水线 在三维观察流水线中 xff0c 也就是在将三维场景显示在二维视口的过程中 xff0c 需要在不同坐标系下进行不同的操作 xff0c 这些坐标系包括
  • javascript:html嵌入javascript代码的三种方式

    一 概念 javascript是运行在浏览器中的脚本语言 xff0c 运行在浏览器的内存当中 xff0c 不需要程序员手动编译 xff0c 编写玩源代码之后 xff0c 浏览器直接打开解释执行 xff0c 简称JS 二 html嵌入java
  • idea中新建和写一个简单的vue项目

    一 使用ida创建一个vue项目 xff08 默认node js环境已配好 xff0c idea已加vue js插件 xff09 xff08 1 xff09 新建项目 xff08 2 xff09 观察项目目录结构 node modules文
  • css的相对定位和绝对定位

    css标签的相对定位和绝对定位是通过position属性来控制的 xff0c 相对定位和绝对定位不改变元素的大小形状 xff0c 只改变元素的位置 一 position属性的值有以下几种 xff1a static 默认值 xff0c 没有定
  • 个人博客系统(Vue实现)的主页布局设计

    源码地址 xff1a https gitee com cheng xuyuan blogWeb git xff08 请忽略这句 xff09 一 整体布局 上下划分 xff0c 再左右划分 主体代码 xff1a lt el container
  • 绘制Vue主页的列表结构(包括增、删、改、查功能)

    源码地址 xff1a https gitee com cheng xuyuan blogWeb git xff08 请忽略这句 xff09 一 面包屑导航区域设计 xff08 下面划红线的部分 xff09 说明 xff1a el bread
  • pytorch入门10--循环神经网络(RNN)

    补充 xff1a torch randn 函数返回一个张量 xff0c 包含了从正态分布 xff08 均值为0 xff0c 方差为1 xff09 中抽取的一组随机数 张量的形状由参数决定 xff0c 参数个数任意 例如 xff1a torc
  • amixer用法

    1 先看看amixer支持哪些命令 大概有哪些功能 amixer help Usage amixer lt options gt command Available options h help this help c card N sel
  • 常见的UNIX/LINUX命令

    一 文件目录类命令 命令格式 xff1a lt 命令名称 gt 选 项 参数1 参数2 例如 xff1a ls la etc 1 浏览目录命令 xff08 1 xff09 ls list 功能 xff1a 显示目录文件 语法 xff1a l
  • redis介绍4--配置文件、持久化、事务、消息的发布与订阅、集群、哨兵模式、Jedis

    一 redis的配置文件redis conf 1 redis配置文件中关于网络的配置 1 port 指定redis服务所使用的端口 xff0c 默认使用6379 2 bind 配置客户端连接redis服务时 xff0c 所能使用的ip地址
  • Keil uVision5报错error:#5:#include “core_cm3.h“

    也是Keil小白 xff0c 在编译程序的时候出现了问题 xff0c 解决的文章链接po在 这里 xff01 下文为搬运 用Keil vision5编译时出现以下错误 xff1a error 5 cannot open source inp
  • 软件工程第二章——软件生命周期(仅记录我所认为重要的知识点)

    软件工程第二章 软件生命周期 前言生命周期组成 xff08 顺序 xff09 对应文档软件过程活动动作任务 软件过程模型CMM能力成熟度模型瀑布模型适用场合 xff1a 瀑布模型的缺点 V模型 xff08 瀑布模型的变种 xff09 原型模
  • 解决vxe-table的表头动态渲染第一次不显示

    问题描述 xff1a vxe table表头当使用了 lt vxe colgroup gt 二级 多级表头 xff0c 设一级表头写死 xff0c 二级表头动态加载 xff0c 那么每次赋值二级表头时 xff0c 值赋上去了 xff0c 页