前端组件wolfTable中关于表格冻结部分的说明

在wolfTable 中,可以使用冻结表格,这样就可以达成类似下拉滚动条的时候始终显示前几行的功能。

 

在这里,用组件自带的案例代码来做说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import '@wolf-table/table/dist/table.min.css';
import Table from "@wolf-table/table";
 
const t = Table.create(
  '#table',
  () => 1400,
  () => 600,
  {
    scrollable: true,
    resizable: true,
    selectable: true,
    editable: true,
    copyable: true,
  }
)
  .freeze('D5')
  .merge('F10:G11')
  .merge('I10:K11')
  .addBorder('E8:L12', 'all', 'medium', '#21ba45')
  .formulaParser((v) => `${v}-formula`)
  .data({
    styles: [
      { bold: true, strikethrough: true, color: '#21ba45', italic: true, align: 'center', fontSize: 12 },
    ],
    cells: [
      [0, 0, 'abc'],
      [1, 1, 100],
      [2, 6, { value: 'formua', style: 0 }],
      [9, 5, { value: '', formula: '=sum(A1:A10)' }],
    ],
  })
  .render();

 上述代码中的 .freeze('D5')的含义如下

    A  B  C  D  E  F  G

     ------------------------------------------------------
1   |                           |          |
2   |                   |          |
3   |                           |                                    |
4   |                           |          |
     ------------------------------------------------------
5   |                           | D5                               |
6   |                           |                                    |
7   |                           |                                    |
8   |                           |                                    |
     ------------------------------------------------------

上面这部分中,D5上方的单元格和D5右方的单元格是被冻结的单元格,也就是说不管你的滚动条如何移动,这部分的内容永远固定在那边。

如果你只想固定前两行的话,那么在freeze函数中传入'A3'

依此类推,如果你想固定前两列的话,那么就需要传入'C1'

 

posted @   hihibaibai  阅读(66)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
点击右上角即可分享
微信分享提示