前端元件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'

相關文章