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 |