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

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

 

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

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'