elementui表格自定义合并单元格根据相同值合并单元格；指定列合并；解决自定义合并后单元格样式错乱

本文链接：https://blog.csdn.net/Sunny_lxm/article/details/130077708

文章讲述了如何在使用ElementUI框架的表格组件时，根据json数据中id相同的记录进行单元格的合并。具体实现方法包括使用`span-method`属性，处理数据数组生成合并信息，并在`objectSpanMethod`方法中判断并设置合并的行数和列数，特别关注了防止样式错乱的问题。

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

elementui表格根据指定相同属性值合并单元格

josn数据，id相同的单元格合并，前3column和后7column合并

let arr = [
{"op":"Susan","marketingID":"US","stockQty":208,"id":"1","labelSKU":"VPH-B0EA"},
{"op":"Leon","marketingID":"IDWUS","stockQty":32,"id":"1","labelSKU":"VPH--OG"},
{"op":"Amber","marketingID":"AMZ","stockQty":270,"id":"1","labelSKU":"BBT--00-GWFBA-1"},
{"op":"Ginger","marketingID":"AMZ","stockQty":125,"id":"2","labelSKU":"CWB--RD-GWFBA-1"},
{"op":"Emily","marketingID":"AMZ","stockQty":532,"id":"2","labelSKU":"FBT--US--1"},
{"op":"Leon","marketingID":"IDWUS","stockQty":32,"id":"3","labelSKU":"VPH--OG"},
{"op":"Susan","marketingID":"US","stockQty":208,"id":"4","labelSKU":"VPH--OG"},
{"op":"Emily","marketingID":"AMZ","stockQty":508,"id":"5","labelSKU":"FBT---BNFBA-1"},
{"op":"Chloe","marketingID":"US","stockQty":30,"id":"5","labelSKU":"SGO--00"},
{"op":"Susan","marketingID":"US","stockQty":208,"id":"6","labelSKU":"VPH--OG"}

]

// :span-method = "objectSpanMethod" 关键
<el-table  :span-method="objectSpanMethod"
           highlight-current-row
           :height="tableHeight"
           :data="PageListsData"
           ref="PageListstable">
</el-table>


data（） {
spanArr:[]
}

// 方法 获取列表数据 根据id相同的合并单元格
getDataList（）{

      //  table 合并数据处理: id相同的合并单元格
     if (this.arr.length !== 0) {
        this.spanArr = [];
        let pos = 0;
        this.arr.forEach((item, index) => {
              if (index === 0) {
                    this.spanArr.push(1);
              } else {
                     if (item.id === this.arr[index - 1].id) {
                           this.spanArr[pos] += 1;
                           this.spanArr.push(0);
                     } else {
                           pos = index;
                           this.spanArr.push(1);
                     }
               }
      });
   }

}
          // table 合并数据方法处理
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            // id相同的合并单元格  前3行和7行之后
            if (!(columnIndex > 3 && columnIndex < 7)) {
                if(this.spanArr[rowIndex]) {
                    return {
                        rowspan: this.spanArr[rowIndex],
                        colspan: 1
                    };
                } else {
// 解决合并单元格后样式错乱的关键！！！！
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        }

// 解决合并单元格后样式错乱的关键！！！！
return {
rowspan: 0,
colspan: 0
};