vue-export2excel合并单元格
在 vue-export2excel 中合并单元格是通过设置单元格的 rowspan 和 colspan 属性来实现的。
首先，安装 vue-export2excel：
```
npm install vue-export2excel
```
然后，在需要合并单元格的组件中引入 vue-export2excel：
```javascript
import Export2Excel from 'vue-export2excel'
```
html colspan属性
在导出 Excel 的方法中，使用 `port` 方法，通过设置 `multiHeader` 和 `merges` 属性来合并单元格。
`multiHeader` 是一个多级标题的数组，每一级标题的内容和合并的单元格数可以根据需要设置。
`merges` 是一个合并单元格的数组，每一个元素表示一个合并单元格区域的起始和结束坐标。
```javascript
exportExcel() {
  const tHeader = ['姓名', '年龄', '地址', '邮编', '电话']
  const filterVal = ['name', 'age', 'address', 'zip', 'phone']
  const list = [
    {
      name: '张三',
      age: 18,
      address: '北京市朝阳区',
      zip: '100000',
      phone: '138****5678'
    },
    {
      name: '李四',
      age: 20,
      address: '上海市浦东新区',
      zip: '200000',
      phone: '139****4321'
    }
  ]
  const merges = [
    { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } }, // 合并第一列的两个单元格
    { s: { r: 0, c: 1 }, e: { r: 1, c: 1 } }, // 合并第二列的两个单元格
    { s: { r: 0, c: 2 }, e: { r: 1, c: 2 } }, // 合并第三列的两个单元格
    { s: { r: 0, c: 3 }, e: { r: 1, c: 3 } }, // 合并第四列的两个单元格
    { s: { r: 0, c: 4 }, e: { r: 1, c: 4 } }, // 合并第五列的两个单元格
  ]
  const data = this.formatJson(filterVal, list)
  port({
    multiHeader: [
      ['信息导出'],
      ['姓名', '年龄', '个人信息', '']
    ],
    merges,
    header: tHeader,
    data,
    filename: 'excel',
    autoWidth: true,
    bookType: 'xlsx'
  })
},
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
}
```
以上代码将导出一个包含合并单元格信息的 Excel 表格，其中第一列和第二列的单元格被合并为一格，第三列和第四列的单元格也被合并为一格。
注意：合并单元格的坐标是从 0 开始计算的，s 表示起始坐标，e 表示结束坐标，r 表示行，c 表示列。上述示例中的合并单元格表示合并了第一行的第一列到第五列的单元格。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。