# ohos_VTable

**Repository Path**: developer-toolkit/ohos_-vtable

## Basic Information

- **Project Name**: ohos_VTable
- **Description**: VTable的ArkWeb包装
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-12-29
- **Last Updated**: 2026-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VTable
## 简介

VTable是一款表格生成器，支持表格自定义header、可缩放、可自定义单元格、可指定分割线颜色、支持冻结行列、支持onScroll滚动回调、支持指定行列的宽高、支持单元格的点击、可滚动到指定行列。


## 下载安裝

```
 ohpm install @ohos/vtable
```

OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装 OpenHarmony ohpm 包](https://gitcode.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md)。


## 使用说明

#### initTable
初始化表格数据  
```typescript
import { VTableController,initTable } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.initTable(this.option)
```

#### updateColumns
修改表头标题
```typescript
import { VTableController,updateColumns } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.updateColumns(this.columns)
```

#### frozenToCol
冻结至列
```typescript
import { VTableController,frozenToCol } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.frozenToCol(Number(value1))
```

取消冻结列
```typescript
import { VTableController,frozenToCol } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.frozenToCol(0)
```

#### frozenRow
冻结至行
```typescript
import { VTableController,frozenRow } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.frozenRow(Number(value1) + 1)
```

取消冻结行，解冻后需要进行刷新
```typescript
import { VTableController,frozenRow } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.frozenRow(1)
```

#### mergeCell
合并单元格
```typescript
import { VTableController,mergeCell } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.mergeCell(
                Math.min(this.mergeCellParams[0], this.mergeCellParams[2]),  // startRow
                Math.min(this.mergeCellParams[1], this.mergeCellParams[3]),  // startCol
                Math.max(this.mergeCellParams[0], this.mergeCellParams[2]),  // endRow
                Math.max(this.mergeCellParams[1], this.mergeCellParams[3])   // endCol
              );
```

#### customRender
自定义渲染
```typescript
import { VTableController,customRender } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.customRender(this.mergeCellParams[0], this.mergeCellParams[1],this.mergeCellParams[2], this.mergeCellParams[3])
```

#### cancelCustomRender
取消自定义渲染
```typescript
import { VTableController,cancelCustomRender } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.cancelCustomRender(this.mergeCellParams[0], this.mergeCellParams[1],this.mergeCellParams[2], this.mergeCellParams[3])
```

#### scrollToCol
滚动到列
```typescript
import { VTableController,scrollToCol } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.scrollToCol(Number(value1) - 1)
```

#### scrollToRow
滚动到行
```typescript
import { VTableController,scrollToRow } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.scrollToRow(Number(value1))
```

#### setRowHeight
改变行高
```typescript
import { VTableController,setRowHeight } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.setRowHeight(Number(value1), Number(value2))
```

####  setColWidth
改变列宽
```typescript
import { VTableController,setColWidth } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.setColWidth(Number(value1) - 1, Number(value2))
```

####  setSplitLineColor
改变列分割线颜色
```typescript
import { VTableController,setSplitLineColor } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.setSplitLineColor([value1])
```

####  setZoom
缩放
```typescript
import { VTableController,setZoom } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.setZoom(true)
```

####  setDiagonal
添加斜线
```typescript
import { VTableController,setDiagonal } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.setDiagonal(
                Math.min(this.mergeCellParams[0], this.mergeCellParams[2]),
                Math.min(this.mergeCellParams[1], this.mergeCellParams[3]),
                Math.max(this.mergeCellParams[0], this.mergeCellParams[2]),
                Math.max(this.mergeCellParams[1], this.mergeCellParams[3])
              )
```

#### deleteDiagonal
删除斜线
```typescript
import { VTableController,deleteDiagonal } from '@ohos/vtable';

@State vTableController: VTableController = new VTableController();
this.vTableController.deleteDiagonal(
                Math.min(this.mergeCellParams[0], this.mergeCellParams[2]),
                Math.min(this.mergeCellParams[1], this.mergeCellParams[3]),
                Math.max(this.mergeCellParams[0], this.mergeCellParams[2]),
                Math.max(this.mergeCellParams[1], this.mergeCellParams[3])
              )
```

## 接口说明
### 接口

| 功能名称                 | 入参内容                                                                 | 功能描述                               |
|-------------------------|-------------------------------------------------------------------------|----------------------------------------|
| initTable               | [option](https://visactor.io/vtable/option/ListTable): Record<string, Object \| Record<string, Object>>                 | 初始化表格数据                          |
| updateColumns           | [newColumns](https://visactor.io/vtable/option/ListTable#columns): Array<Record<string, Object>>                               | 修改表头标题                            |
| frozenToCol             | index: number                                                           | 冻结指定标题的列                        |
| frozenRow               | index: number                                                           | 冻结指定索引的行                        |
| mergeCell               | startCol: number, startRow: number, endCol: number, endRow: number      | 合并单元格                              |
| unmergeCells            | startCol: number, startRow: number, endCol: number, endRow: number      | 取消合并单元格                          |
| customRender            | startCol: number, startRow: number, endCol: number, endRow: number, id: string = 'default',[style](https://visactor.io/vtable/option/ListTable-columns-text#style)?: Record<string, Object>| 自定义渲染                   |
| cancelCustomRender      | startCol: number, startRow: number, endCol: number, endRow: number      | 取消自定义渲染                          |
| scrollToCol             | colIndex: number                                                        | 滚动到指定标题的列                      |
| scrollToRow             | rowIndex: number                                                        | 滚动到指定索引的行，可指定位置和额外参数  |
| setRowHeight            | rowIndex: number, height: number                                        | 改变指定索引行的高度，可选是否强制设置    |
| setColWidth             | colIndex: number, width: number                                         | 改变指定标题列的宽度                    |
| setSplitLineColor       | color: string[]                                                         | 设置分割线颜色                          |
| updateOption            | [option](https://visactor.io/vtable/option/ListTable): Record<string, Object \| Record<string, Object>>                 | 更新表格配置                            |
| renderWithRecreateCells | 无                                                                       | 重新渲染表格                            |
| setZoom                 | isMagnify: boolean                                                       | 缩放，true是放大，false是缩小            |
| release                 | 无                                                                       | 释放                                    |
| setDiagonal             | startCol: number, startRow: number, endCol: number, endRow: number      | 添加斜线                                |
| deleteDiagonal          | startCol: number, startRow: number, endCol: number, endRow: number      | 删除斜线                                |





## 约束与限制

在下述版本验证通过：
- DevEco Studio: DevEco Studio 6.0.1 Release(6.0.1.251), SDK: API12(5.0.0.71)

## 贡献代码

使用过程中发现任何问题都可以提交 [Issue](https://gitcode.com/openharmony-tpc-incubate/ohos_VTable/issues)，当然，也非常欢迎提交 [PR](https://gitcode.com/openharmony-tpc-incubate/ohos_VTable/pulls) 。

## 开源协议

本项目遵循 [MIT]()， 请自由的享受和参与开源。