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;
}
},