# spread-js-table
**Repository Path**: sunxuedong/spread-js-table
## Basic Information
- **Project Name**: spread-js-table
- **Description**: A spreadJS - based table component
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 2
- **Forks**: 1
- **Created**: 2020-11-16
- **Last Updated**: 2024-06-07
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# SpreadJsTable
> 一个基于葡萄城SpreadJS的表格组件
SpreadJsTable依赖使用的SpreadJS版本是13.0.0
对于非SpreadJS 13.0.0的版本，目前没有做兼容。
## 安装
### npm 安装
```shell
npm install spread-js-table -S
```
### script 引入
```shell
```
## 快速开始
### 使用 npm
查看代码
main.js
import Vue from 'vue'
import GC from '@grapecity/spread-sheets'
import '@grapecity/spread-sheets-vue';
import '@grapecity/spread-sheets-charts';
import '@grapecity/spread-sheets/styles/gc.spread.sheets.css';
import '@grapecity/spread-sheets-resources-zh';
import ExcelIO from '@grapecity/spread-excelio';
import SpreadJSTable from 'spread-js-table';
GC.Spread.Common.CultureManager.culture('zh-cn');
Vue.use(SpreadJSTable, {
GC,
ExcelIO
});
demo.vue
<template>
<spread-js-table :columns="columns" :data="data">
</spread-js-table>
</template>
### 使用 script 引入
查看代码
<!DOCTYPE html>
<html>
test2
<link rel="stylesheet" href="http://sunxuedong.gitee.io/library/grapecity/spread-js/13.0.0/spread-sheets/gc.spread.sheets.css">
html, body, #app {
height: 100%;
}
<body>
<div id="app">
<spread-js-table :data="data" :columns="columns"></spread-js-table>
</div>
</body>
</html>
## SpreadJsTable 表格
### 基础表格
基础的表格展示用法。
查看代码
<template></template>
<spread-js-table :columns="columns" :data="data"></spread-js-table>
</spread-js-table>
</template>
### 带斑马纹表格
使用带斑马纹的表格，可以更容易区分出不同行的数据。
查看代码
<template></template>
<spread-js-table :columns="columns" :data="data"
oddRowBackColor="red" evenRowBackColor="green"></spread-js-table>
</spread-js-table>
</template>
### 带状态表格
可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。
查看代码
<template></template>
<spread-js-table :columns="columns" :data="data"
@render-row="renderRow"></spread-js-table>
</spread-js-table>
</template>
### 固定列
横向内容过多时，可选择固定列，frozenColumnNum决定固定的列数，frozenTrailingColumnNum决定固定尾列的列数。
查看代码
<template></template>
<spread-js-table :columns="columns" :data="data" @render-cell="renderCell"
@button-click="buttonClick" :frozenColumnNum="1" :frozenTrailingColumnNum="1"></spread-js-table>
</spread-js-table>
</template>
### 多级表头
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
查看代码
<template></template>
<spread-js-table :columns="columns" :data="data"></spread-js-table>
</spread-js-table>
</template>
### 单选
选择单行数据时使用 Checkbox。
查看代码
<template></template>
<spread-js-table :columns="columns" :data="data"></spread-js-table>
</spread-js-table>
</template>
### 全选
选择多行数据时使用 Checkbox。
查看代码
<template></template>
<spread-js-table :columns="columns" :data="data"></spread-js-table>
</spread-js-table>
</template>
### 排序 & 筛选（spreadJS 本身具有的功能）
### 表尾合计行
若表格展示的是各类数字，可以在表尾显示各列的合计，可以通过isNeedGather的bool值来决定是否汇总。
查看代码
<template></template>
<spread-js-table :columns="columns" :data="data"></spread-js-table>
</spread-js-table>
</template>
## SpreadJsTable Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :---- | :---- | :---- | :---- | :---- |
| data | 显示的数据 | array | — | — |
| columns | 列头 | array | — | — |
| isShowFilteredNumber | 是否显示使用spreadJS过滤后，过滤的数量 | array | — | — |
| oddRowBackColor | 奇数行的背景色 | string | — | #dcdcdc |
| evenRowBackColor | 偶数行的背景色 | string | — | #ffffff |
| frozenColumnNum | 固定表格列的数量，从左边开始 | number | — | 0 |
| frozenTrailingColumnNum | 固定表格列的数量，从左边开始 | number | — | 0 |
## SpreadJsTable Events
| 事件名 | 说明 | 参数 |
| :---- | :---- | :---- |
| selection-change | 当选择项发生变化时会触发该事件 | selection |
| cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | array | row, column, hitinfo |
| cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, hitinfo |
| header-cell-mouse-center | 当列头单元格 hover 进入时会触发该事件 | column, hitinfo |
| header-cell-mouse-leave | 列头 | 当列头单元格 hover 退出时会触发该事件 | column, hitinfo |
| cell-db-click | 当某一单元格被双击时会触发该事件 | row, column |
| row-db-click | 当某一行被双击时会触发该事件 | row, column |
| button-click | 当点击单元格button时会触发该事件 | {row, column, text} |
| render-row | 当处理表格的每行数据时会触发该事件（可以通过对style对象的属性赋值，达到更改行样式的目的） | {rowIdx, rowData, style} |
| render-cell | 当渲染单元格时会触发该事件（可以通过对style对象的属性赋值，达到更改单元格样式的目的） | {rowIdx, colIdx, column, style} |
| render-header | 当渲染列头时会触发该事件（可以通过对style对象的属性赋值，达到更改列头单元格样式的目的） | {style, column, colIdx, rowIdx} |
## SpreadJsTable Methods
| 方法名 | 说明 | 参数 |
| :---- | :---- | :---- |
| refresh | 刷新sheet | — |
| clearTableCheckStatus | 清空表格的选中状态 | — |
| exporting | 导出 | {name:'', data: []} // name:导出文件的名称 data: 导出的数据，默认当前页数据 |
## SpreadTable-column Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :---- | :---- | :---- | :---- | :---- |
| type | 对应列的类型 | string | radio/checkbox | — |
| name | column 的 key | string | — | — |
| displayName | 显示的标题 | string | — | — |
| cellType | 单元格的类型 | object | — | — |
| isProtect | 该列是否开启表单保护 | boolean | — | true |
| isFilterable | 该列是否有过滤功能 | boolean | — | true |
| isNeedGather | 该列是否有汇总功能 | boolean | — | false |
| isVisible | 该列是否可见 | boolean | — | true |
| children | 多表头的key | boolean | — | — |
| wordWrap | 是否允许换行，值为true时，可通过‘\r\n’给文字换行 | boolean | — | false |