刚听到这个需求,感觉简直不要太简单。虽然没有搞过这样的需求,但是element的table自带合并不是么。然后自以为是的我被现实狠狠的打了一巴掌
一、官方API
【element table】
如果官方文档能够解决我的问题,就不会有以下问题了。不过还是建议有必要尝试一下官方Demo
二、接收需求
当指定的两列,值与相邻行相同时需要对指定列进行合并操作
先来一些模拟数据:
data() {
return {
tableData: [
{ id: "0", name: "张三", sex: "女" },
{ id: "1", name: "李四", sex: "男" },
{ id: "2", name: "李四", sex: "男" },
{ id: "3", name: "李四", sex: "未知" },
{ id: "4", name: "王五", sex: "未知" },
{ id: "5", name: "张三", sex: "女" },
{ id: "6", name: "张三", sex: "女" },
{ id: "7", name: "张三", sex: "未知" },
{ id: "8", name: "王五", sex: "女" },
{ id: "9", name: "王五", sex: "女" },
{ id: "10", name: "李四", sex: "女" },
{ id: "11", name: "李四", sex: "女" }
]
};
}
需求转换真实效果,如图所示:
看似很简单,其实真的不难。
只要把官方Demo吃个差不多,举一反三即可。
三、大展手脚
经过好一番折腾,终于得以实现⬇️
解决问题,首先要明确思路。
- 整合数据,需要明确知道哪些数据是要进行合并的,哪些是被合并的,哪些是不需要合并的
- 修改合并的逻辑
3.1 组件展示
<el-table
:data="tableData"
:border="true"
style="width: 300px;"
>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="sex" label="性别"></el-table-column>
</el-table>
默认展示为:
3.2 整合数据
添加 rowspan
标记合并行的位置信息
调整依据: 姓名 && 性别 分别相同的相邻行需要进行合并
// 调整数据
adjusData(){
let dataSource = [...this.tableData];
// 注意:此操作为倒序操作
for (let i = dataSource.length - 1; i > 0; i--) {
if (!dataSource[i].rowspan) dataSource[i].rowspan = 1; // 默认都是1
if (
dataSource[i].name == dataSource[i - 1].name &&
dataSource[i].sex == dataSource[i - 1].sex
) {
// 主要处理数据的逻辑在这里
/**
* 如果满足条件,则上一个数据的rowspan需要进行累加,即为需要进行合并的行数
* 当前行的rowspan需要重置为0; 0即为需要被合并的单元格
*/
dataSource[i - 1].rowspan = dataSource[i].rowspan + 1;
dataSource[i].rowspan = 0;
}
}
// 有可能第一个数据的rowspan为undefined 所以再次处理数据,避免出错
dataSource = dataSource.map((item, index) => {
if (index == 0 && !item.rowspan) {
return {
...item,
rowspan: 1
};
}
return item;
});
this.tableData = dataSource;
}
3.3 修改组件
添加一个属性:span-method="objectSpanMethod"
3.4 合并展示数据
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 当列索引是1(第二列), 需要设置要合并的列/行
if (columnIndex === 1) {
if (row.rowspan > 1) {
// 当rowspan值不为1,即代表需要进行向下合并 合并行数为当前rowspan
return {
rowspan: row.rowspan, // 向下合并rowspan行
colspan: 1 // 合并1列,即只在当前列操作合并行
};
} else if (row.rowspan == 1) {
// rowspan为1 不作合并操作
return {
// 1表示不合并
rowspan: 1,
colspan: 1
};
} else {
// 其他行
return {
// 0表示已被合并, 直接不显示
rowspan: 0,
colspan: 0
};
}
}
// 当列索引是2(第三列), 需要设置要合并的列/行
if (columnIndex === 2) {
if (row.rowspan != 1) {
return {
rowspan: row.rowspan,
colspan: 1
};
} else if (row.rowspan == 1) {
return {
rowspan: 1,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
如此即可!!!