此文章用于记录踩过的坑:
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)
	  }
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐