CtSheet

在线表格组件

使用的是univer

使用指南

安装

# NPM
$ npm install ct-sheet

注册

import { createApp } from 'vue'
import CtSheet from 'ct-sheet';
import "ct-sheet/style"  //注意样式文件也需要引的

const app = createApp(App);
app.use(CtSheet)；

app.mount('#app');

属性

属性名	说明	类型	默认值
tableData	规范的表格数据（{columnData，tableData}），会根据这里的数据生成在线表格的初始化数据	Array/ Object	-
sheetData	在线表格快照出来的数据，在线表格的标准数据，通过这份数据能还原对应的在线表格的内容以及样式	Object	-
needFilter	是否开启删选过滤功能	Boolean	-
abnormalData	异常数据，会在表格上标出异常信息，是和后端预定好的数据，具体字段说明下面会展示	Object	-
needEmptyReplace	是否需要空值替换，因为空值的格子是不会显示异常信息的，具体的替换内容可以使用emptyReplaceStr控制	Boolean	-
emptyReplaceStr	空值需要替换成的内容	String	(空)
protectionHeader	是否开启保护表头（第一行）	Boolean	-
watermark	控制水印的字段，存在就代表需要开启水印，支持传入水印的配置数据，具体字段说明下面会给出	Boolean/Object	-
disableCopy	是否禁止表格复制	Boolean	-
height	在线表格的高度，在线表格是需要高度的，没有高度撑不起来	String	‘100vh’

abnormalData字段说明

属性名	说明	类型
tableKey	表格一行数据的唯一key，用于索引是那一行数据	String
data	具体的异常数据，eg:{ 1: { entity: '单位不存在' , ...} }，其中1是一行数据（row）tableKey对应的值也就是row[tableKey]，会通过这个值找到对应的行的索引，entity代表是有异常的字段，里面存放的就是异常提示，会通过这个字段找到列的索引	Object

watermark是Object时的字段说明

属性名	说明	类型	默认值
customCb	自定义水印的回调函数，函数的传参是拓展Univer的canvas的draw的配置，api对应可以看这里	Function	-
itemHeight	一个水印的高	Number	160
itemWidth	一个水印的宽	Number	265
font	canvas的font字段	String	'15px Arial'
fillStyle	canvas的fillStyle字段	String	'rgba(199,199,199,0.5)'
textAlign	canvas的textAlign字段	String	'center'
showText	水印展示的文字	String	'Cingta'
initW	水印初始距离画布左侧的距离	Number	120
initH	水印初始距离画布顶部的距离	Number	60
rotate	水印旋转角度	Number	20
customItemCb	自定义一个水印的回调函数，函数的参数{ctx：画布的getContext('2d')， w：当前水印的x坐标，h: 当前水印的y坐标}	Function	-

Expose（可以调用的属性方法）

属性名	说明	类型
univerAPI	univer的Facade API	Object
setTableData	通过传入标准的表格数据（{columnData，tableData}）来控制在线表格显示内容的方法	Function
getSheetData	获取在线表格快照数据的方法，也就是前面属性里sheetData所需要的数据	Function
getTableData	会将在线表格数据转换成表格数据格式的数据，传参（options： {isTableFormat： 是否转成tableData,columnData格式}）	Function