> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 视图组件

> 视图组件是仪表盘数据呈现的专业化工具，通过在仪表盘中配置不同类型的专业视图，实现针对特定业务场景构建专业可视化的界面。

## 功能简介

视图组件是仪表盘数据呈现的专业化工具，通过在仪表盘中配置不同类型的专业视图，实现**针对特定业务场景构建专业可视化的界面**。

**典型的仪表盘视图应用场景包括：**

* **专业化业务视图构建**：根据不同业务需求选择专业视图类型，创建符合实际数据可视化需求的界面。
  * **画册视图**：适用于产品展示、案例库、知识库等图文并茂的内容展示。
  * **看板视图**：用于敏捷开发、任务管理、工作流推进等拖拽式流程管理。
  * **甘特视图**：专为项目管理、进度跟踪、资源排期等时间线管理设计。
  * **日历视图**：适合日程安排、会议管理、活动策划等时间维度组织。
  * **表格视图**：提供传统的数据查看、编辑、筛选、排序等数据处理能力。

## 操作流程

### **添加视图组件**

1. 进入AI表格应用模块。
2. 在左侧导航栏选择需要添加组件的目标页面。
3. 在弹出组件的分类中找到 **视图**，然后按需选择 **表格、看板、日历、甘特图 或 画册** 视图。

<img src="https://mintcdn.com/dingtalk-8c0f98e2/5efBfDsSBTINIXBF/zh/aitable/application-mode/view-component/images/image_uw50EOOrxz.png?fit=max&auto=format&n=5efBfDsSBTINIXBF&q=85&s=bcdfb617f882bd6a752d48ab85bdfd93" alt="" width="754" height="94" data-path="zh/aitable/application-mode/view-component/images/image_uw50EOOrxz.png" />

### 基础配置

添加视图组件后，右侧弹出配置面板。您可进行如下配置：

* **标题名称**
  * 默认名称为“视图”，支持用户自定义修改。
* **数据选择**
  * **数据表与范围**：支持选择具体数据表及数据范围。
    * 选择 **全部数据** 时，可进一步设置筛选条件。
* **字段管理**
  * **可见字段：** 控制视图中显示的字段及其顺序。

    * 点击字段右侧的  图标，可隐藏或显示该字段。
    * 拖拽字段左侧的  图标，可调整字段的显示顺序。
    * *注意：此处仅控制字段的显示与排序，不支持新增、修改或删除字段本身。*
* **视图类型专属配置**

  根据所选视图类型，提供不同的详细配置项：

  * **表格视图**：可配置分组设置、排序规则、行高密度等。
  * **看板视图**：可配置分组依据字段、卡片封面字段（需有附件类型字段）、展示模式（常规/紧凑）、是否显示字段名、排序规则等。
  * **甘特图视图**：可配置开始日期字段、结束日期字段、标题显示字段、颜色标记字段、是否仅显示工作日、排序规则等。
  * **画册视图**：可配置卡片封面字段（需有附件类型字段）、是否显示字段标题、排序规则等。
  * **日历视图**：可配置排序规则、开始日期字段、结束日期字段、标题显示字段、颜色标记字段等。

### 自定义配置

* **工具栏显示设置**

  可勾选需在视图组件顶部工具栏中显示的交互按钮，支持的按钮类型包括：

  * **筛选**：显示筛选按钮，支持快捷设置筛选条件。
  * **排序**：显示排序按钮，支持按字段排序。
  * **查找**：显示搜索框，支持关键词搜索。
  * **分组：** 显示分组按钮，支持配置分组条件。
* **自定义样式**
  * **背景颜色**

    可通过色盘选择，自定义设置组件的整体背景颜色。
  * **边框样式**
    * **边框颜色**：从系统预设配色板或自定义颜色中选择边框颜色。
    * **边框粗细**：从下拉列表中选择 `1px`、`2px` 等选项，以精确控制边框的宽度。
  * **标题颜色**

    可单独设置组件标题文字的颜色，使其与背景形成对比，提高可读性。
* **权限设置**
  * **记录操作权限**
    * **允许添加记录**：勾选后，视图左上角将显示 **添加记录**按钮，点击可新增数据行。

  * **按钮文字自定义**

    支持修改上述操作按钮的显示文字，如将“添加记录”改为“新建项目”、“新增客户”等业务术语。
* **自定义按钮**
  * 支持启用/停用自定义按钮，开启此开关后，可在视图中添加用户自定义的功能按钮。类似按钮组件，支持配置按钮点击后触发的动作。

  * 可对手动添加的自定义按钮进行复制、删除的操作，当按钮列表中有多个自定义按钮时，支持上下拖拽修改按钮顺序。

### **管理视图组件**

* **操作菜单**

  选中组件后，点击其右上角的  图标，将展开操作菜单，您可以在此进行以下操作：

  * **配置**：快速打开该组件的属性配置面板。
  * **复制**：在当前页面内复制一个相同的组件。
  * **复制到**：将组件复制到本应用内的其他指定页面。
  * **删除**：将组件从当前页面中移除。
* **调整大小与位置**

![](https://img.alicdn.com/imgextra/i4/O1CN01151yt91IDTMXMq7jR_!!6000000000859-1-tps-2938-1492.gif)

* **调整大小**：将鼠标悬停在组件右下边角通，并拖动拖拽手柄，即可自由调整组件的宽度和高度。
* **移动位置**：将鼠标移至组件上方，浮现  图标，按住鼠标左键并拖动，可在页面内拖拽组件调整位置。

## 常见问题

#### 问：单个页面最多可以添加多少个视图组件（包含表格、卡片、画册、甘特和日历）？

答：10个。

#### 问：最多可添加多少个自定义按钮？

答：10个。