element表格固定某一行_ElementUI Table 首行固定

需求描述：首行固定，吸附在表头下，数据多时其他行可以纵向滚动

方案一两个表格拼凑

第一个表格展示头部和固定行第二个表格展示其它数据示意图如下

优点：固定行数没有限制

缺点：适用场景，仅横向纵向均无滚动条时可用

若有横向滚动条，两个表格的滚动条是分开的，会出现滚动A B不动，或滚动B A不动的情况，Windows下会展示两个横向滚动条，不美观

若有纵向滚动条，在Windows下滚动条是默认有宽度的，滚动条的宽占用了表格B的部分宽度，导致表头和表主体列错位，示意图如下

方案二修改表格样式将合并行上移

ElementUI 的 Table 有合并行这个功能，合并行位于 footer 中，固定在表格底部，即使 body 有横向或纵向滚动，样式和功能都已经优化好了。示意图如下

要做的就是把样式调整成我们想要的，使用定位把 footer 放到 header 下，body 向下移一行的距离即可。

补充：图中为官方定义合并行内容的方法，如果单元格内展示的内容或样式比较复杂，可以 return 元素，类似 JSX 写法

优点：如有滚动不用过多关注样式和功能问题

缺点：只能固定一行

总结：

方案一两个表格都无数据时的效果、两个表格的拼接处边框样式要处理。

方案二表格如果为流体高度，要判断表格高度是内容撑开还是已经达到最大高，同时要监听窗口缩放事件灵活定位

END~~~≥ω≤

element表格固定某一行_ElementUI Table 首行固定相关推荐

listview 的首行固定内容标题且加粗显示（类似于表格的首行）的实现方法
项目中有需求,将 listview 的首行固定内容标题(类似于表格的首行),效果如下: 实现方式如下: Adapter 的 getCount 中返回比数据集合多一行: @Overridepublic ...
WPF DataGrid 通过自定义表头模拟首行固定
WPF DataGrid 通过自定义表头模拟首行固定独立观察员 2021 年 9 月 25 日最近工作中要在 WPF 中做个表格,自然首选就是 DataGrid 控件了.问题是,UI 设计的表格是 ...
table表格首列首行固定
本方法对于复杂类型的表表头同样适用,对于那些并行并列的(colspan或者rowspan),不过需要在表格创建后自己额外修改自动生成表格第一步引入js //可以去这里下载自己重新创建一个,还需要引用 ...
table表头行固定
大鱼吃小雨,快鱼吃慢雨,市场竞争无比激烈的今天,谁不以客户为导向,以客户为中心,时刻为客户提供优质的服务,必然被市场无情的淘汰. 最近一个客户希望:一次性将所有的数据全部展示出来,不需要分页,且表头行 ...
excel首行固定_EXCEL 一个工作表如何快速拆分多个工作表的方法
下面说下在一个工作簿里把里面的一个工作表依据实际需求的条件内容,快速拆分成多个工作表方法. 1.打开excel文件,现在需要依据地区和国家这个条件,分别单独生成不同的工作表出来,最原始的方法是手动新建 ...
excel首行固定_基金定投只有高手才能玩？不，你用Excel就可以品职Python小白入门课堂...
只有大神能玩的量化? 相信很多学金融,或对金融感兴趣的读者都会觉得量化是一个非常高深.需要很深数学功底的领域.但事实上,尽管有很多量化模型应用到了一些十分高深的数学模型,量化离我们的生活并没有那么的遥 ...
Excel文件首行固定前n行固定首列固定前n列固定
1.首行首列固定 2.前n行固定或者前n列固定选中第n+1行或者第n+1列,在冻结窗口下来选项中,选 "冻结拆分窗格"命令. 3.固定前n行前m列.(此处以n=3,m=5 ...
Excel首行固定与重复值比较
Excel2010 冻结窗口 1. 视图(view)--> 冻结窗口(Froze window),"冻结首行"(Froze head row). "冻结首列&quo ...
element表格取消全选_ElementUi 表格取消全选框，用文字表示
Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图一. 添加添加复选框列二.给方法(这个方法主要就是给表格所需要的列添加类名.)具体可以看ElementUi的表格 ...

element表格固定某一行_ElementUI Table 首行固定

element表格固定某一行_ElementUI Table 首行固定相关推荐

最新文章

热门文章