解决elementUI中el-table如何实现多列合并后固定,并且使用fixed属性导致导出成excel时数据重复的问题。

此文章用于记录踩过的坑:
1.如何固定已经合并的多列非一级表头数据。
2.因el-table加了fixed属性导出table时数据重复问题

1.如何固定已经合并的多列非一级表头数据

当我们需要去固定某一级表头的一列时,最为简单,只需要给该列添加fixed属性即可,具体教程可参照elementUI官网
为某一列加入fixed属性以固定一级表头的一列

 <el-table-column
      fixed//只需要添加这一个属性即可
      prop="date"
      label="日期"
      width="150">
    </el-table-column>

但是当我们需要合并的数据为非一级表头时,该功能会失效,如:

在这里插入图片描述
这里使用header-cell-style属性实现三列合并,但是无论给哪一列或者全部加上fixed属性 都不能固定这三列

**因此
1.必须把需要合并的多列添加至一级表头。
2.再对该一级表头添加fixed属性
3.为每列、合并后的一级表头分别设置列宽度以避免数据渲染时出现问题
**

这是修改后的结果:
在这里插入图片描述
设计的具体代码如下:

<el-table-column
        :label="2023年1月'"
        align="center"
        width="300"
        fixed
      >
        <el-table-column
          prop='platFormUp'
          align='center'
          label="店铺"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop='platForm'
          align='center'
          label="销售类型"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop='dataType'
          align='center'
          label="类型"
          width="100"
        >
        </el-table-column>
      </el-table-column>

导出成excel时数据重复问题

因为上述操作给table加了fixed属性,element底层会给table创建两个dom元素,通过一份隐藏一份显示来实现交互.
我们打印时需要去掉多余的一份el-table__fixed。

这是没有去掉之前的dom元素:
在这里插入图片描述
我们可以将table的dom元素获取到之后复制一份,将复制后的dom元素去掉fixed的部分再打印即可。
具体代码逻辑如下:

	  let tableEle = document.getElementById('tableId')
      if (!tableEle) return
      //用div复制一遍要打印的表格dom
      let div = document.createElement('div');
      div.innerHTML = tableEle.innerHTML
      //因为添加fixed属性,elementUI底层会把table的dom创建两份,通过一份隐藏一份显示来实现交互,我们打印时需要去掉多余的一份el-table__fixed
      let fixedLeft = div.querySelector('.el-table__fixed')
      if (fixedLeft) fixedLeft.remove()
      let fixedRight = div.querySelector('.el-table__fixed-right')
      if (fixedRight) fixedRight.remove()
      
      // 导出处理好的数据
	  let book = XLSX.utils.table_to_book(div)
	  let write = XLSX.write(book, {bookType: 'xlsx', bookSST: true, type: 'array'})
	  try {
	    FileSaver.saveAs(new Blob([write], { type: 'application/octet-stream' }), '表格数据.xlsx');
	  } catch (e) {
	    console.log('导出失败', e)
	  }
  • 14
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值