前端组件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'
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升