# 视图

- Human documentation: [https://docs.univer.ai/zh-CN/guides/bases/model/views](https://docs.univer.ai/zh-CN/guides/bases/model/views)

- Agent Markdown: [https://docs.univer.ai/zh-CN/guides/bases/model/views.md](https://docs.univer.ai/zh-CN/guides/bases/model/views.md)

- Requested language: `zh-CN`

- Content language: `zh-CN`

- Documentation version: `1.0.0-rc.0`

- Source: [bases/model/views.zh-CN.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/bases/model/views.zh-CN.mdx)

---

视图描述表格以何种方式呈现给用户。视图可以隐藏字段或调整字段顺序，也可以筛选、排序和分组记录，并能为网格、看板、日历、甘特图或画廊设置各自的专用配置。

## 视图快照

| 属性             | 类型                                    | 说明                                                         |         |
| -------------- | ------------------------------------- | ---------------------------------------------------------- | ------- |
| id             | `string`                              | 视图 ID。                                                     |         |
| tableId        | `string`                              | 所属表的 ID。                                                   |         |
| name           | `string`                              | 视图名称。                                                      |         |
| type           | `BaseViewType`                        | `grid`, `kanban`, `calendar`, `gantt`, `gallery`, `pivot`. |         |
| fieldOrder?    | `string[]`                            | 该视图中的字段顺序。                                                 |         |
| fieldSettings? | `Record\<string, IViewFieldSetting\>` | 各字段的可见性、宽度和卡片设置。                                           |         |
| filter?        | \`IFilterConfig                       | null\`                                                     | 视图筛选配置。 |
| sort?          | `ISortConfig[]`                       | 排序规则。                                                      |         |
| group?         | `IGroupConfig[]`                      | 分组规则。                                                      |         |
| config         | `ViewSpecificConfig`                  | 该视图类型专用的配置。                                                |         |

## 视图类型

| 类型         | 使用场景                                                  |
| ---------- | ----------------------------------------------------- |
| `grid`     | 以类似电子表格的方式编辑表格。                                       |
| `kanban`   | 按选择、人员、组、文本或日期字段对卡片分组。                                |
| `calendar` | 根据日期字段排列记录。                                           |
| `gantt`    | 使用开始日期和结束日期字段进行时间线规划。                                 |
| `gallery`  | 以卡片布局展示侧重视觉或内容较多的记录。                                  |
| `pivot`    | 由[仪表盘插件](https://docs.univer.ai/zh-CN/guides/bases/features/dashboard.md)提供，用于汇总与图表。 |

## 创建视图

```ts
const view = table.createView('Kanban', univerAPI.Enum.BaseViewType.Kanban)
```

## 配置筛选与排序

```ts
view.setFilter({
  conjunction: univerAPI.Enum.BaseFilterConjunction.AND,
  conditions: [
    {
      fieldId: 'status',
      operator: univerAPI.Enum.BaseFilterOperator.IS,
      operand: 'In progress',
    },
  ],
})

view.setSort([
  { fieldId: 'dueDate', direction: univerAPI.Enum.BaseSortDirection.ASC },
])
```

## 字段可见性与宽度

```ts
view.setFieldVisible('internalNotes', false)
view.setFieldWidth('title', 280)
```