表格
注册表格能力
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() 作为数据来源。
你觉得这篇文档如何?