> ## 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.

# 表格组件

> 本文档提供了关于如何使用代码控制表格列选中、获取选中的行、设置字段的编辑格式为下拉选择以及开启树形结构后默认展开渲染行的方法。此外，还介绍了不同版本（免费版、轻享版、专业版、专属版）支持的功能对比，并提供进一步阅读表格详细文档和自定义页面中获取表单数据写入表格的链接。

| **能力** | **免费版** | **轻享版** | **专业版** | **专属版** |
| ------ | ------- | ------- | ------- | ------- |
| 表格组件   | 不支持     | 不支持     | 支持      | 支持      |

<Note>
  组件属性以及使用和示例请[**点击此处**](/zh/open/yida/components/advanced/table)查看
</Note>

## 1. 如何用代码控制表格列选中

### 1.1 选中表格组件，点击「行选中器」

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1613796023697-7dd7698b-2244-4be2-9606-952873e9ea04.png)
</Frame>

表格组件右侧的属性设置

### 1.2 开启「是否显示」，给「已选中的行」绑定一个变量。可以初始化为一个空数组，表示全部不选中

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1635317868921-4b702b71-1bb9-40a9-8931-bb61b7ef3eb5.png)
</Frame>

### 1.3 查看您表格的数据源，找到对应的行唯一标识 「id」，跟进这个 「id」可以控制当前行的是否选中

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1635320014271-81a41b6d-faef-4d03-911e-4e1727bd5928.png)
</Frame>

### 1.4 给您的操作按钮绑定事件，通过控制自定义的数据源来控制某行选中

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onClick(){
  this.setState({
    selectedRows: ['1'], // 表格数据源里的 id
  });
}
```

### ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1635320065247-38e1b370-ceb8-41cf-9503-a96d4e990c84.png)

## 2. 如何获取选中的行

### 2.1 绑定事件，行选择器 >> 选择变动回调

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1635320093859-44ded606-0358-45bf-b0d5-7c1fcd233ae5.png)
</Frame>

### 2.2 如果需要在其他时机获取，可创建一个「变量」数据源，自己存储下来

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
    export function onSelectChange(selectedRowKeys, records) {
      console.log(selectedRowKeys, records);
      this.setState({
        selectedRowsData: records,
      });
    }
```

## 3. 如何设置字段的编辑格式为下拉选择

### 3.1 先将编辑格式更改为下拉选择

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625564638890-c1dae1b5-fc54-4e4a-8b91-a5fce1d9bde9.png)
</Frame>

### 3.2 更改编辑配置的内容

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1625564951033-03aed121-14e3-4a97-b5a6-ceca7ed68c23.png)
</Frame>

**参考代码：**

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "rules": [],
  "placeholder": "",
  "__sid__": "param_kqrr5pkb",
    //以下为选项内容
  "dataSource": [
    {
      "text": "1",
      "value": "1"
    },
    {
      "text": "2",
      "value": "2"
    }
  ]
}
```

## 4. 表格开启了树形结构后，如何默认展开渲染的行

在编辑代码中的数据格式需要是一个数组，数组中的值就是对应每一行的数据主键，这样就可以默认展开对应的数据。  也可以绑定一个变量，在每次点击的时候去更改这个变量，这样可以动态修改默认展示的数据。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1627436231417-ecdd8b57-e58f-4f42-bea7-b6b887decb25.png)
</Frame>

## 5. 表格的详细文档

[**点击此处查看表格文档**](/zh/open/yida/components/advanced/table)

## 6. 自定义页面中获取表单数据后，写入表格

此处为语雀内容卡片，点击链接查看：[https://www.yuque.com/yida/video/zmt2a2](https://www.yuque.com/yida/video/zmt2a2)