vue excel导出合并单元格
时间: 2023-12-08 16:39:08 浏览: 44
以下是使用vue-json-excel库实现excel导出合并单元格的示例代码:
```vue
<template>
<div>
<button @click="exportExcel">导出Excel</button>
</div>
</template>
<script>
import JsonExcel from 'vue-json-excel'
export default {
components: {
JsonExcel
},
data() {
return {
tableData: [
{
A: '合并单元格',
B: '测试1',
C: '测试2',
D: '测试3'
},
{
A: '',
B: '测试4',
C: '测试5',
D: '测试6'
},
{
A: '',
B: '测试7',
C: '测试8',
D: '测试9'
}
]
}
},
methods: {
exportExcel() {
const multiHeader = [
[
{
A: '合并单元格',
B: '测试1',
C: '测试2',
D: '测试3'
}
],
[
{
A: '',
B: '测试4',
C: '测试5',
D: '测试6'
},
{
A: '',
B: '测试7',
C: '测试8',
D: '测试9'
}
]
]
const multiHeaderLen = multiHeader.length
const merges = [
{
s: {
r: 0,
c: 0
},
e: {
r: multiHeaderLen - 1,
c: 0
}
}
]
this.$refs.downloadExcel.generateExcel(
this.tableData,
'excel文件名',
multiHeader,
merges
)
}
}
}
</script>
```
其中,multiHeader表示表头,merges表示需要合并的单元格,s表示起始单元格,e表示结束单元格,r表示行,c表示列。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)