element---首列单元格合并

image.png

1、表格测试数据，以及数据处理下

reportList： [
    {
                company_id: 1,
                company_name: "测试企业xxxx",
                company_ums_name: "xxxx",
                division_amount: 0,
                refund_amount: 0,
                total_amount: 0,
     },
    {
                company_id: 111,
                company_name: "测试企业zzzz",
                company_ums_name: "zzzzz",
                division_amount: 0,
                refund_amount: 0,
                total_amount: 0,
     },
     {
                company_id: 222,
                company_name: "测试企业222",
                company_ums_name: "2222",
                division_amount: 0,
                refund_amount: 0,
                total_amount: 0,
     },
      {
                company_id: 222,
                company_name: "测试企业222",
                company_ums_name: "2222",
                division_amount: 0,
                refund_amount: 0,
                total_amount: 0,
    },
    {
                company_id: 333,
                company_name: "测试企业333",
                company_ums_name: "3333",
                division_amount: 0,
                refund_amount: 0,
                total_amount: 0,
     },
     {
                company_id: 333,
                company_name: "测试企业333",
                company_ums_name: "3333",
                division_amount: 0,
                refund_amount: 0,
                total_amount: 0,
    }
]
// 合并首列公司名字的单元格数据做处理
let newList = reportList.map((item, index) => {
    let obj = {
        id: item.company_id,
        index: index,
    };
    return obj;
}); // 名字筛选出来
const newArr = [];
newList.forEach((item) => {
    // 定义一个变量存放索引
    let index = newArr.findIndex((v) => {
        return item.id === v.id;
    });
    // 判断index的值 findIndex方法找不到返回-1 找不到就新加上 找到就找到新数组中这个值的位置给他num++
    index === -1
        ? newArr.push({
                num: 1,
                id: item.id,
                index: item.index,
            })
        : newArr[index].num++;
});
// 合并单元格处理的新数组(data里面自定义下mergeList )
this.mergeList = newArr;

2、表格标签上加方法处理 :span-method="objectSpanMethod"

// 合并单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
        let resObj = { rowspan: 1, colspan: 1 };
        if (this.mergeList.length > 1) {
            this.mergeList.map((item) => {
                if (item.id == row.company_id && item.num > 1) {
                    if (rowIndex == item.index) {
                        resObj = {
                            rowspan: item.num,
                            colspan: 1,
                        };
                    } else {
                        resObj = {
                            rowspan: 0,
                            colspan: 0,
                        };
                    }
                }
            });
        }
        return resObj;
    }
},