视图

同一张表可以有多个视图，例如用网格录入任务，再用看板追踪状态。切换视图不会复制记录。

视图	适合的场景	主要配置
网格 `Grid`	逐行编辑、筛选和排序	冻结字段、行高、字段宽度
看板 `Kanban`	按状态或负责人分组	`groupFieldId`
日历 `Calendar`	查看日期安排	`startDateFieldId`，可选结束日期
甘特图 `Gantt`	计划工期与依赖	开始、结束日期，以及可选进度和依赖字段
画廊 `Gallery`	展示图片和内容卡片	封面、标题和卡片字段
透视 `Pivot`	汇总统计与图表	需要仪表盘插件

下面的 table 是已取得的表，字段 ID 应替换为该表中的实际字段。日期、分组等字段应先创建，再配置相应视图。

创建视图

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 },  ],})

通过视图级字段设置，可以控制字段的可见性、宽度和卡片展示方式，而无需更改底层表结构。

日历与日期字段

TypeScript

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

日历需要开始日期字段。甘特图还要求结束日期字段，并可以配置工作日、进度和依赖关系。画廊通过 card 配置标题和展示字段。

排序和字段显示

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',}])

规则按数组顺序确定优先级；传入 [] 清空规则。支持单元格、整行和整列着色，其中整列着色不判断条件。

你觉得这篇文档如何？