表格(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))合并单元格
通过设置单元格的 mergeLeft 和 mergeUp 属性实现合并:
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)
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
xmm | number | 50 | X 坐标(毫米) |
ymm | number | 50 | Y 坐标(毫米) |
rotation | number | 0 | 旋转角度(度) |
visible | boolean | true | 是否可见 |
表格特有属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
rowsHeight | number[] | [48, 48, 48, 48] | 各行高度(像素) |
colsWidth | number[] | [168, 168, 168, 168, 168, 168] | 各列宽度(像素) |
cells | CellConfig[][] | 自动初始化 | 单元格配置二维数组 |
activeRow | number | 0 | 当前活动行 |
activeCol | number | 0 | 当前活动列 |
CellConfig 单元格配置
| 属性 | 类型 | 说明 |
|---|---|---|
text | string | 单元格文本 |
fill | string | 单元格背景色 |
fontSize | number | 字号 |
align | 'left' | 'center' | 'right' | 'justify' | 水平对齐 |
verticalAlign | 'top' | 'middle' | 'bottom' | 垂直对齐 |
fontStyle | string | 字体样式 |
borderUp | boolean | 是否显示上边框 |
borderLeft | boolean | 是否显示左边框 |
mergeLeft | boolean | 是否向左合并 |
mergeUp | boolean | 是否向上合并 |
visible | boolean | 是否可见(合并单元格自动设为 false) |
表格单位
表格的 rowsHeight 和 colsWidth 以像素为单位(基于当前 DPM)。表格的 wmm 和 hmm 由 updateCells() 自动计算。