# spancol

> spanCol

Latest version **1.0.7** (published 2022-04-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install spancol
pnpm add spancol
yarn add spancol
bun add spancol
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2022-04-07 |
| First published | 2022-04-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 35.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wupeng |
| Maintainers | wupeng123321 |

## Links

- npm: https://www.npmjs.com/package/spancol
- npm.io page: https://npm.io/package/spancol

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.31
- [spancol](https://npm.io/package/spancol.md) ^1.0.1

## Recent versions

- 1.0.7 (latest) — 2022-04-07
- 1.0.6 — 2022-04-07
- 1.0.5 — 2022-04-07
- 1.0.4 — 2022-04-07
- 1.0.3 — 2022-04-07
- 1.0.2 — 2022-04-01
- 1.0.1 — 2022-04-01
- 1.0.0 — 2022-04-01

## README

## 基于
 > https://github.com/wupengwupeng/element-ui-table-spancol.git
```javascript
<script setup lang="ts">
import spanRow from 'spancol'
const data = [
  { field1: "营业收费系统", field2: "中国农业银行", field3: "2022-03", filed4: '2022-03-04', filed5: '4' },
  { field1: "营业收费系统", field2: "中国农业银行", field3: "2022-03", filed4: '2022-03-05', filed5: '2' },
  { field1: "营业收费系统", field2: "中国农业银行", field3: "2022-03", filed4: '2022-03-06', filed5: '2' },
  { field1: "营业收费系统", field2: "中国农业银行", field3: "2022-03", filed4: '2022-03-07', filed5: '2' },
  { field1: "营业收费系统", field2: "中国农业银行", field3: "小计", filed4: '', filed5: '2' },
  { field1: "营业收费系统", field2: "中国建设银行", field3: "2022-04", filed4: '2022-04-05', filed5: '3' },
  { field1: "营业收费系统", field2: "中国建设银行", field3: "2022-04", filed4: '2022-04-06', filed5: '2' },
  { field1: "营业收费系统", field2: "中国建设银行", field3: "2022-04", filed4: '2022-04-07', filed5: '2' },
  { field1: "营业收费系统", field2: "中国建设银行", field3: "2022-04", filed4: '2022-04-08', filed5: '2' },
  { field1: "营业收费系统", field2: "中国建设银行", field3: "小计", filed4: '', filed5: '2' },
  { field1: "营业收费系统", field2: "小计", field3: "", filed4: '', filed5: '1' },

  { field1: "报装管理系统", field2: "中国农业银行", field3: "2022-03", filed4: '2022-03-04', filed5: '12' },
  { field1: "报装管理系统", field2: "中国农业银行", field3: "2022-03", filed4: '2022-03-05', filed5: '21' },
  { field1: "报装管理系统", field2: "中国农业银行", field3: "2022-03", filed4: '2022-03-06', filed5: '21' },
  { field1: "报装管理系统", field2: "中国农业银行", field3: "2022-03", filed4: '2022-03-07', filed5: '21' },
  { field1: "报装管理系统", field2: "中国农业银行", field3: "小计", filed4: '', filed5: '6' },
  { field1: "报装管理系统", field2: "中国建设银行", field3: "2022-04", filed4: '2022-04-05', filed5: '11' },
  { field1: "报装管理系统", field2: "中国建设银行", field3: "2022-04", filed4: '2022-04-06', filed5: '53' },
  { field1: "报装管理系统", field2: "中国建设银行", field3: "2022-04", filed4: '2022-04-07', filed5: '53' },
  { field1: "报装管理系统", field2: "中国建设银行", field3: "2022-04", filed4: '2022-04-08', filed5: '53' },
  { field1: "报装管理系统", field2: "中国建设银行", field3: "小计", filed4: '', filed5: '32' },
  { field1: "报装管理系统", field2: "小计", field3: "", filed4: '', filed5: '23' },
]
const option = [
  { index: 0, field: "field1" },
  { index: 1, field: "field2" },
  { index: 2, field: 'field3' }
]
const onSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
  return spanRow(
    { row, column, rowIndex, columnIndex },
    data,
    option
  );
}
<script setup lang="ts">
```


```html

 <el-table
        id="printJS-table"
        class="border"
        :data="data"
        border
        :span-method="onSpanMethod"
        height="100%"
      >
        <el-table-column prop="field1" label="field1"></el-table-column>
        <el-table-column prop="field2" label="field2"></el-table-column>
        <el-table-column prop="field3" label="field3"></el-table-column>
        <el-table-column prop="filed4" label="filed4"></el-table-column>
        <el-table-column prop="filed5" label="filed5"></el-table-column>
      </el-table>
      <el-button @click="printHtml">打印</el-button>
    </div>
```


## 你也可以这样使用

```javascript

npm i spancol

在main.js中引入
import spancol form 'spancol'

app.use(spancol)

在vue文件中使用
this.spancol({ row, column, rowIndex, columnIndex },
    data,
    option) // org就是需要传入的参数

 
```

---
_Source: https://npm.io/package/spancol · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._