vue表格导出数据重复

vue表格导出数据重复

vue + elementUI 使用表格 xlsx 导出表格数据功能，但发现导出数据重复的问题

问题所在：element 实现el-table-column fixed会重复渲染一个table。
解决办法：
一：简单粗暴直接解决 去掉table列fixed属性
二：

// 解决原理先移除el-table__fixed-right固定列再append进去导出数据（注：id为表格id，下方id可用'#id名'代替）
	var fix = document.querySelector('.el-table__fixed-right');
	var wb;
	 if (fix) {
	   wb = XLSX.utils.table_to_book(document.querySelector(id).removeChild(fix));
	   document.querySelector(id).appendChild(fix);
	} else {
	   wb = XLSX.utils.table_to_book(document.querySelector(id))
	}

完整导出表格数据代码：

<el-button type="primary" @click="exportExcel">导出数据</el-button>

 //导出列表数据
      exportExcel() {
        // 解决原理先移除再append进去
        var fix = document.querySelector('.el-table__fixed-right');
        var wb;
        if (fix) {
          wb = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix))
          document.querySelector('#out-table').appendChild(fix)
        } else {
          wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        }
        /* 从表生成工作簿对象 */
        // let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: 'application/octet-stream' }),
            //设置导出文件名称
            '导出文件名.xlsx'
          )
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      },

又是元气满满的一天哦~ 愿你一蹦哒就能见到想见的人🙈 愿你头一歪就是想要依靠的人🙊