表格

插件信息

注册表格能力

Slides 表格能力拆分为模型包和 UI 包:

TypeScript
import { UniverSlidesTablePlugin } from '@univerjs-pro/slides-table'import { UniverSlidesTableUIPlugin } from '@univerjs-pro/slides-table-ui'import SlidesTableUIEnUS from '@univerjs-pro/slides-table-ui/locale/en-US'import '@univerjs-pro/slides-table-ui/lib/index.css'import '@univerjs-pro/slides-table/facade'univer.registerPlugin(UniverSlidesTablePlugin)univer.registerPlugin(UniverSlidesTableUIPlugin)

包职责

  • @univerjs-pro/slides-table 将表格元素接入 slide 模型,并提供表格相关 facade API。
  • @univerjs-pro/slides-table-ui 提供浏览器编辑 UI、渲染集成、选择行为和右键菜单操作。

运行时选择

浏览器编辑器使用两个包。Node.js 处理场景通常只需要模型包,除非你还需要浏览器渲染能力。

TypeScript
univer.registerPlugin(UniverSlidesPlugin)univer.registerPlugin(UniverSlidesTablePlugin)

如果需要打开或导入可能包含表格元素的 deck,请在处理前注册表格能力,否则运行时无法完整解释这些元素。

稳定的表格颜色

插入表格或更改表格样式时,插件会将当前主题色板解析成该表格自有的主题快照。因此,即使全局 Univer 主题发生变化,已有表格仍会保留原来的颜色;选择其他表格样式时则会生成新的快照。标准 Facade 操作会自动管理这一过程。

Facade API

导入 facade 入口后,FSlide 会增加表格相关方法:

TypeScript
import '@univerjs-pro/slides-table/facade'

从纯文本二维数组创建表格:

TypeScript
const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideById('slide-1')const table = fSlide.insertTableFromData(  [    ['Quarter', 'Owner', 'Status'],    ['Q1', 'Sales', 'Done'],    ['Q2', 'Marketing', 'In progress'],  ],  {    id: 'status-table',    rowHeight: 42,    columnWidth: 160,  },)

如果需要明确控制位置和尺寸,可以使用 table builder:

TypeScript
const tableInfo = fSlide.newTable()  .setValues([    ['Metric', 'Value'],    ['Revenue', '$120K'],  ])  .setRows(2)  .setColumns(2)  .setAbsolutePosition(80, 120)  .setSize(420, 180)  .build()const table = fSlide.insertTable(tableInfo)

读取和更新表格单元格:

TypeScript
const table = fSlide.getTableById('status-table') ?? fSlide.getTableAt(0)if (table) {  console.log(table.describe())  console.log(table.getCellText(0, 0))  table.getCell(1, 2)?.setText('Blocked')  table.getCell(0, 0)?.setBackgroundColor('#E8F1FF')}

更新或删除已有表格:

TypeScript
const table = fSlide.getTableById('status-table')if (table) {  const nextTableInfo = table.toBuilder()    .setValues([      ['Quarter', 'Owner', 'Status'],      ['Q1', 'Sales', 'Done'],      ['Q2', 'Marketing', 'Blocked'],    ])    .setSize(480, 200)    .build()  fSlide.updateTable(nextTableInfo)  fSlide.removeTable(table)}

表格的行列索引从 0 开始。Builder 的行列数量会自动扩展以容纳传入的值,因此对于简单表格,可以把 setValues() 作为数据来源。

你觉得这篇文档如何?

© 2026 DreamNum Co., Ltd.