el-table合并表头，导出表头，数据错乱的问题

最新推荐文章于 2024-05-16 09:23:16 发布

m0_51113907

最新推荐文章于 2024-05-16 09:23:16 发布

阅读量902

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_51113907/article/details/128287377

版权

本文介绍了在使用Vue.js和ElementUI时遇到的el-table表头错位及数据导出时因fixed属性导致的重复问题。通过删除fixed引起的多余表格节点和处理隐藏的表头单元格，成功解决了表头错乱和数据重复的难题。

摘要由CSDN通过智能技术生成

出现的问题：表头错位，数据重复

合并表头使用的函数方法：

    <el-table
      :header-cell-style="setHeader"
    ></el-table>
//自己选择控制那两列的表头合并
 setHeader({ row, column, rowIndex, columnIndex }) {
      if (row[0].level == 1) {
        //这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效(百度的备注)
        row[1].colSpan = 3;
        row[2].colSpan = 0;
        row[3].colSpan = 0;
        if (columnIndex === 2 || columnIndex === 3) {
          return { display: "none" };
        }
      }
    },

这样子直接用导出就会出现表头行错乱，以及fiexd导致的数据重复的问题

经过修改