1 合并表头
1.1 合并物品数量与邮件数量的表头
合并前
合并后
2 合并列/行单元格
合并前
合并后
3 表尾合计
image.png
4 修改/拆分合并单元格
- 通过数据集合
mergeRules来制定合并规则，只要改变mergeRules里规则绑定值即可使其改变合并规则，以下只展示了最基础的代码，提供过方法后，具体怎么扩展，可根据实际需求进行改动
拆分
拆分/改变合并规则前
拆分/改变合并规则后
5 动态单元格合并
- 以上描述的均为指定合并，不够灵活，无法根据数据的改变去动态进行合并单元格
5.1 数据项
- 可以看到，需要合并的单元格的
ID是一致的，下面也会根据id来动态制定规则
tableData: [
{
id:'1',
date: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333,
articleNumber: 10,
zipNumber: 15,
},
{
id:'1',
date: "2016-05-02",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333,
articleNumber: 10,
zipNumber: 15,
},
{
id:'2',
date: "2016-05-04",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333,
articleNumber: 10,
zipNumber: 15,
},
{
id:'3',
date: "2016-05-01",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333,
articleNumber: 10,
zipNumber: 15,
},
{
id:'3',
date: "2016-05-08",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333,
articleNumber: 10,
zipNumber: 15,
},
{
id:'3',
date: "2016-05-06",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333,
articleNumber: 10,
zipNumber: 15,
},;
{
id:'4',
date: "2016-05-07",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333,
articleNumber: 10,
zipNumber: 15,
},
],
5.2 根据数据项标识 id 动态制定合并规则
mergingRule() {
// 制定合并单元格规则
// this.mergingRule = [];
const arr = [];
this.tableData.forEach((x, index) => {
const value = arr.find((v) => x.id === v.id);
// 如果找到相同的ID项，则视为隐藏该项 规则写入0
if (value) {
this.mergeSpanRules.push(0);
this.cellSpanRules.push(0);
} else {
// 如果没找到 则视为合并单元格起始位置
this.mergeSpanRules.push(index);
arr.push(x);
// 根据id查有几个 跟第一次循环到是数据id 项相同的, 用来判断要合并几列
const list = [];
this.tableData.forEach((v) => {
if (v.id === x.id) {
list.push(v);
}
});
this.cellSpanRules.push(list.length);
}
});
console.log(this.mergeSpanRules, this.cellSpanRules);
},
// 合并单元格
// { 当前行的值, 当前列的值, 行的下标, 列的下标 }
spanMethod({ row, column, rowIndex, columnIndex }) {
// 动态合并
// 合并第一列 || 第二列
if (columnIndex === 0 || columnIndex === 1) {
// 根据行数索引 取出合并开始位置
const colspan = this.mergeSpanRules[rowIndex];
// 判断行索引位置跟开始位置是否一致
if (rowIndex === colspan) {
// 根据行索引 取出合并多少行的规则
return {
rowspan: this.cellSpanRules[rowIndex],
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
}
},
- 可以从控制台看到：
1，this.mergeSpanRules代表合并起始位置，0代表不参与合并，但由于第一条数据的索引为0，所以展示成了0，但不会影响效果，因为下边将会把起始位置跟行的索引位置比较，要是觉得不够直观的话，可以把0代表不参这个值改成任意字符来表示，但切记不要用除0外的数字。
2，this.cellSpanRules代表合并数（合并几列），0代表不展示。
效果图
5.3 完整代码