首页 > 其他分享 >如何快速实现table固定第一行

如何快速实现table固定第一行

时间:2023-04-20 16:46:07浏览次数:29  
标签:第一行 滚动 vxe 首行 虚拟 固定 table

固定列这个需求在项目中经常遇到,但是固定行这个需求还是大姑娘上轿 —— 头一回。

关于vxe-table这个插件就不过多介绍了,感兴趣的可以自行搜索。

刚开始看到这个需求的时候,第一想法是插件文档上有没有类似于和固定列一样设置个fixed参数就能解决问题,翻开文档一看,果然,没有这个属性。

怎么办呢?撸起袖子自己干。

在查阅相关资料的时候发现可以通过css能把首行固定,狂喜。。。原来这么简单。赶紧把代码加上,果然,首行固定住了。

代码如下:

position: sticky;
top: 0 ;
z-index: 1 ;

  

还没高兴几秒钟,表格一滚动,发现首行的数据会被莫名的替换掉。

经过一番折腾之后,终于发现数据为什么会被替换。原因是使用vxe-table的时候开启了虚拟滚动。把虚拟滚动关了就可以真正实现固定首行了。

关掉虚拟滚动之后,随即而来的问题就是,如果数据量很大的时候,表格性能可能就会受到影响。

总结:使用vxe-table想要实现固定首行,只需要关闭虚拟滚动,再加上上面的三行css代码就可以,当然其他的table组件用上面的代码也是生效的,前提是在不会有虚拟滚动的前提下。(不是最优方案)。

 

标签:第一行,滚动,vxe,首行,虚拟,固定,table
From: https://www.cnblogs.com/brucefq/p/17337331.html

相关文章

  • CentOS linux关闭iptables防火墙
    评:linux服务器下防火墙为iptables组件,在安装一些软件的时候,iptables防火墙会阻止我们一些必要的连接,所以,我代购的美国服务器,荷兰服务器等海外服务器iptables初始状态为关闭。如果有一些服务器没有关闭iptables,并且你还特别想关闭它,哪么以下命令,你可以能用的上。查看iptables状......
  • K8s为啥要启用bridge-nf-call-iptables内核参数?用案例给你讲明白
    使用kubernetes遇到最多的70%问题都可以归于网络问题,最近发现如果内核参数:bridge-nf-call-iptables设置不当的话会影响kubernetes中Node节点上的Pod通过ClusterIP去访问同Node上的其它pod时会有超时现象,复盘记录一下排查的前因后因。1、问题现象集群环境为K8sv......
  • vue3学习之tabler组件Layout布局
    上一篇使用的bootstrap-vue-next项目迭代很快,考虑还未发文档和正式版本(自己菜)改用原生bootstrap模板tabler项目。tabler安装运行不想安装可直接打开tabler\demo目录下html文件浏览查看效果#获取后目录下运行npminstall#需要先安装https://github.com/oneclick/rubyinst......
  • mac使用Stable Diffusion基础篇
    准备工作提前安装git.python等必要工具 1、git拉取WebUI仓库 gitclonehttps://github.com/AUTOMATIC1111/stable-diffusion-webui2、下载StableDiffusionModelshttps://huggingface.co/CompVis/stable-diffusion-v-1-4-original  3、启动下载完成后,把下载的s......
  • el-table拖动排序
    html<el-tableref="multipleTable":data="tableData"align="left"borderclass="mytable"row-key="id"><el-table-column:index="indexMethod"align="center"type=&q......
  • 最新版本 Stable Diffusion 开源 AI 绘画工具之中文自动提词篇
    目录......
  • 玩转AIGC,5分钟 Serverless 部署 Stable Diffustion 服务
    有没有一种可能,其实你早就在AIGC了?阿里云将提供免费Serverless函数计算产品资源,邀请你,体验一把AIGC级的毕加索、达芬奇、梵高等大师作画的快感。下面请尽情发挥你的想象空间!!双重奖品设置,完成体验场景可得社区1000积分兑换奖品,还可参加AI生成图像比赛赢取Airpods、500元猫超卡......
  • 本地升級stable-diffusion diffuser docker CUDA11.7 RTX2060
    1.0前言本地搭建stable-diffusiondiffuserdockerCUDA10.2RTX2060上次安裝的cuda10.2太舊了,升級cuda11.7順便填一下漏了的點。2.0卸載sudoapt-getremove--purge'^nvidia-.*'sudoapt-getremove--purge'^libnvidia-.*'sudoapt-getremove--purge'^cuda-.*&......
  • 安装stable diffusion
     suuseradd-msd passwdsdsusdmkdir-p/datacd/datayuminstallgit git clonehttps://github.com/AUTOMATIC1111/stable-diffusion-webui.gitwgethttps://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/Miniconda3-py310_23.1.0-1-Linux-x86_64.sh--no-......
  • Lab pgtbl: Page tables
    Speedupsystemcallskernel.h/proc.h,在structproc中添加structusyscall*usyscallkernel.h/proc.c,在proc_pagetable()中添加USYSCALL的PTEkernel.h/proc.c,在allocproc()中为p->usyscall分配空间,初始化p->usyscall->pid=p->pidkernel.h/proc.c,在freeproc(......