最近公司的业务上要求表格要实现单元格合并的功能 比如下面图片
由于有些项id和国家是一样的 我们可以不用每条都展示出来 而是采取相同字段进行行合并的方法来进行展示 如下图
可以看到进行合并操作后 用户体验上更直观了 可以清晰的知道哪些是一起的
因为之前没做过 所以我是进行查询elem文档发现有一个el-table上叫做span-method的方法可以进行单元格合并的操作 如下
但是文档写的不是很详细 然后我是百度之后了解到 返回的对象有三种意义 第一种{
rowspan: 1,colspan: 1}意思是保持单行单列的状态,第二种{rowspan: n,colspan: 1}n表示你想合并的行数,第三种{rowspan: 0,colspan: 0}表示不存在 就是你写这个的话 你的表格被合并某一项就会消失,也就是会跟合并的n项一起展示,好了 大致意思说明后 咱们来看代码实现过程
<el-table :data="list" :span-method="arraySpanMethod" border="" style="width: 100%">
<el-table-column prop="id" label="ID" width="180"></el-table-column>
<el-table-column prop="country" label="国家" width="180"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
这是我定义的表格 可以看到上面有我刚刚说的:span-method="arraySpanMethod"这个方法
data数据为以下
list: [
{ id: "12987121",country: "法国", name: "skrskr",age: 20 },
{ id: "12987122", country: "中国", name: "王力宏", age: 20 },
{ id: "12987122", country: "中国",name: "周杰伦",age: 22 },
{ id: "12987122",country: "中国", name: "林俊杰",age: 22 },
{ id: "12987123", country: "日本",name: "新垣结衣", age: 30},
{ id: "12987124", country: "美国", name: "钢铁侠", age: 30 }
]
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
const arr = this.getSpan(this.list);
console.log(arr);
if (columnIndex < 2) {
const row = arr[rowIndex].row;
const col = arr[rowIndex].col;
return {
rowspan: row,
colspan: col
};
}
以上代码可以看到我是通过另一个方法来获取一个数组 ,那这个数组时干什么的呢 接下来往下看哈
getSpan(list) {
const newArr = [];
const obj = {};
for (let i = 0; i < list.length; i++) {
if (i === 0) {
obj.row = 1;
obj.col = 1;
newArr.push(obj);
} else {
if (list[i].id === list[i - 1].id) {
newArr.push({ row: 0, col: 0 });
const index = list.findIndex(item => {
return item.id === list[i - 1].id;
});
newArr[index].row++;
} else {
newArr.push({ row: 1, col: 1 });
}
}
}
return newArr;
},
可以看到,我是把列表数据进行遍历来比较,如果是第一项的话,咱们先然她保持默认值,也就是
{rowspan: 1,colspan: 1},否则的话继续遍历,如果出现后一项与前一项的某值相同(这里本人使用id来进行比较),先让它消失,就是row和col都为0.然后找出id相同的前一项,让它的row++,也就是合并起来,然后其他的就是保持默认值,此时遍历结束.
可以看到咱们通过id合并的有三行,被合并的row为0,其他只有一条数据的则row为1,至此,合并成功.
码字不易,若掘友有更好的解决办法,可以在评论区讨论哈
