檢視

同一張表可使用多種視圖,切換時不會複製記錄。以下使用既有 table;請先建立日期與分組欄位,並替換示例 ID。

同一張表,多種檢視

修改 Sheets 課程的狀態,再切換檢視。每個檢視都使用同一組記錄。

範例學習計畫 · 2026 年 9 月

課程狀態日期
Sheets未開始
Docs進行中
Slides已完成
Bases進行中

共用記錄: 4 · Sheets: 未開始

建立檢視

TypeScript
const grid = table.createView('All records', univerAPI.Enum.BaseViewType.Grid)const kanban = table.createView(  'By status',  univerAPI.Enum.BaseViewType.Kanban,  {    view: {      config: { groupFieldId: 'status' },    },  },)

在 UI 中啟用檢視

TypeScript
const baseUI = univerAPI.getBaseUI()await baseUI.activateTable(table.getId())await baseUI.activateView(kanban.getId())

設定檢視規則

TypeScript
kanban.setGroup([  { fieldId: 'status', direction: univerAPI.Enum.BaseSortDirection.ASC },])kanban.setFilter({  conjunction: univerAPI.Enum.BaseFilterConjunction.AND,  conditions: [    { fieldId: 'archived', operator: univerAPI.Enum.BaseFilterOperator.IS, operand: false },  ],})

使用檢視層級的欄位設定,即可調整欄位是否顯示、寬度和卡片呈現方式,而不必變更底層的資料表結構。

日曆日期

日曆需要起始日期,甘特圖還需要結束日期,並支援工作日、進度與依賴。Gallery 使用 card 設定標題與顯示欄位。Pivot 彙總與圖表需要儀表盤外掛。

TypeScript
const calendar = table.createView('Schedule', univerAPI.Enum.BaseViewType.Calendar, {  view: {    config: { startDateFieldId: 'startDate', endDateFieldId: 'endDate', mode: 'month' },  },})

排序與欄位顯示

篩選、排序、分組與顯示設定屬於目前視圖,不會刪除底層記錄或欄位。

TypeScript
grid.setSort([{ fieldId: 'priority', direction: univerAPI.Enum.BaseSortDirection.DESC }])grid.setFieldVisible('internalNotes', false)grid.setFieldWidth('title', 280)

條件著色

將分數大於 80 的記錄標色:

TypeScript
const score = table.addField('Score', univerAPI.Enum.BaseFieldType.Number)grid.setConditionalColorRules([{  id: 'high-score',  target: univerAPI.Enum.BaseConditionalColorTarget.ROW,  fieldId: score.getId(),  operator: univerAPI.Enum.BaseConditionalColorOperator.GREATER_THAN,  operand: 80,  color: '#dcfce7',}])

規則依陣列順序決定優先級,傳入 [] 可清除。支援儲存格、整列及整欄;整欄著色不使用條件。

你覺得這篇文檔如何?

© 2026 DreamNum Co., Ltd.