0.2.0 • Published 7 months ago
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 |