spancol
v1.0.7
Published
spanCol
Downloads
3
Readme
基于
https://github.com/wupengwupeng/element-ui-table-spancol.git
<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">
<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>
你也可以这样使用
npm i spancol
在main.js中引入
import spancol form 'spancol'
app.use(spancol)
在vue文件中使用
this.spancol({ row, column, rowIndex, columnIndex },
data,
option) // org就是需要传入的参数