Skip to content

表格(Table)

表格元素用于在画布上显示结构化数据,支持自定义行列数、单元格尺寸、单元格内容和合并单元格。

安装

typescript
import { TablePlugin } from 'vkedit'

host.installPlugin('table-plugin', TablePlugin)

安装后,工具栏会显示表格按钮。点击按钮后即可在画布上创建默认表格。

通过代码创建

typescript
import { AddElementCommand } from 'vkedit'

const elementManager = host.getPlugin('element-manager-plugin')
const table = elementManager.createElement('table')

// 设置位置(毫米)
table.xmm = 10
table.ymm = 10

// 设置行列(通过行高数组和列宽数组定义)
table.rowsHeight = [48, 48, 48]      // 3 行,每行高 48px
table.colsWidth = [168, 168]          // 2 列,每列宽 168px

// 设置单元格数据
table.cells[0][0].text = '姓名'
table.cells[0][1].text = '成绩'
table.cells[1][0].text = '张三'
table.cells[1][1].text = '95'
table.cells[2][0].text = '李四'
table.cells[2][1].text = '88'

// 更新单元格尺寸和位置
table.updateCells()

host.executeCommand(new AddElementCommand(host, table))

合并单元格

通过设置单元格的 mergeLeftmergeUp 属性实现合并:

typescript
// 将第二行第三列的单元格向左合并
table.cells[1][2].mergeLeft = true

// 更新表格
table.updateCells()

表格操作方法

方法说明
addRow(after?)添加行,after 为插入位置(-1 表示末尾)
removeRow(index?)删除行
addCol(after?)添加列
removeCol(index?)删除列
updateCells()重新计算所有单元格的尺寸和位置
setActiveCell(row, col)设置活动单元格
getCell(row, col)获取指定单元格配置

属性

基础属性(继承自 BaseGraphicElement)

属性类型默认值说明
xmmnumber50X 坐标(毫米)
ymmnumber50Y 坐标(毫米)
rotationnumber0旋转角度(度)
visiblebooleantrue是否可见

表格特有属性

属性类型默认值说明
rowsHeightnumber[][48, 48, 48, 48]各行高度(像素)
colsWidthnumber[][168, 168, 168, 168, 168, 168]各列宽度(像素)
cellsCellConfig[][]自动初始化单元格配置二维数组
activeRownumber0当前活动行
activeColnumber0当前活动列

CellConfig 单元格配置

属性类型说明
textstring单元格文本
fillstring单元格背景色
fontSizenumber字号
align'left' | 'center' | 'right' | 'justify'水平对齐
verticalAlign'top' | 'middle' | 'bottom'垂直对齐
fontStylestring字体样式
borderUpboolean是否显示上边框
borderLeftboolean是否显示左边框
mergeLeftboolean是否向左合并
mergeUpboolean是否向上合并
visibleboolean是否可见(合并单元格自动设为 false)

表格单位

表格的 rowsHeightcolsWidth 以像素为单位(基于当前 DPM)。表格的 wmmhmmupdateCells() 自动计算。

下一步

基于 MIT 许可发布