前端元件wolfTable中關於表格凍結部分的說明

hihibaibai發表於2024-03-28
前端元件

在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'

相關文章