最近的一个项目里面有一个需求是这样的，要实现表格第一列和最后一列相同的内容合并成一格，形成的结果就是多条有相同字段的数据放在表格里面看起来就是一条数据，但是中间的列还是显示每条数据不同的部分。实现的结果如下图
相同的班级的数据被合并成一条，实际是4条数据需要页面显示获取到了2条数据
而项目用的UI库iview虽然官网上有介绍表格行列合并，但是看完示例之后我是一脸懵逼的，完全就没有说清楚好不好，也有可能是我理解有问题吧。参考了网上的一些文章才最后弄懂这个东西怎么用，这篇文章就把这个记录下来以备以后忘了可以查看。
基础用法
先按照官网上的写法来理解一遍
<Table
:columns="columns"
:data="tableData"
class="table"
width="1000"
border
:span-method="handleSpan"
>
<template slot="action">
<a>编辑</a>
<Divider type="vertical" />
<a>删除</a>
</template>
</Table>
column配置照着官网文档写就行，而数据其实还是四条
tableData: [
{
name: '张一',
class: '1',
age: 15
},
{
name: '张二',
class: '1',
age: 14
},
{
name: '王一',
class: '2',
age: 16
},
{
name: '王二',
class: '2',
age: 15
}
]
最重要的是span-method
handleSpan({rowIndex, columnIndex}) {
if(rowIndex === 0 && columnIndex === 0) {
return [2, 1];
} else if (rowIndex === 1 && columnIndex === 0) {
return [0, 0];
}
if(rowIndex === 2 && columnIndex === 0) {
return [2, 1];
} else if (rowIndex === 3 && columnIndex === 0) {
return [0, 0];
}
}
第一处if-else判断：
rowIndex === 0代表第一行，columnIndex === 0代表第一列
return [2, 1] 代表需要合并2行1列
同理 rowIndex === 1 && columnIndex === 0代表第二行第一列
return [0, 0]代表合并0行0列，即它是被合并的单元格
同理可得第二个if-else判断就是把第三行第一列和第四行第一列合并在了一起，而最后一列的合并和第一列的合并基本相同，至此这个表格就算完成了。
注意：rowIndex和columnIndex都是从0开始的，return[0, 0]都是代表的被合并的单元格。
项目中使用
项目中的数据肯定不会这样写了，从上面的span-method方法可以看出这个里面实际上进行了数据的遍历，所以我们可以先把接口拿到的数据处理好，然后在span-method中直接返回设置好的值就行了。写到这里我发现直接写下去有点难，我在项目里面后台返回的是一个分组之后的数据，所以很直观的就做出来了，如果取到的数据是一个散乱的一维数组，假设后台也懒得给你分组，那么整套流程就需要前端自己完成了。
为了使思路清晰一点，我们从结果反向推导：
- 为了使第一列相同的项合并，我们可以在每条数据里面添加两个属性，这里我取名叫
rowSpan和colSpan，对应span-method的返回值。因为第三列和第一列合并的行数相同，所以也是用相同的值。
handleSpan({row, column, rowIndex, columnIndex}) {
if(columnIndex === 0 || columnIndex === 3) {
const rowSpan = row.rowSpan;
const columnSpan = row.columnSpan;
return [rowSpan, columnSpan];
}
}
- 我们来计算每一条数据对应的这两个值，由上文的分析我们可以知道只有合并项的第一项是需要特殊的值的，后面的被合并项都返回[0, 0]，然后第一项的返回值应该是
[（相同的项的长度）, 1]（合并n行1列）。我们先假设后台返回的数据已经是分好组的了。
tableData2: [
[
{
name: '张一',
class: '1',
age: 15
},
{
name: '张二',
class: '1',
age: 14
}
],
[
{
name: '王一',
class: '2',
age: 16
},
{
name: '王二',
class: '2',
age: 15
}
]
]
......
// 将分组后的数据转化为table组件需要的一维数组
setTableData(arr) {
const resArr = _.cloneDeep(arr);
resArr.forEach(classItem=>{
// 遍历每一个分组
classItem.forEach((val, ind)=>{
if(ind === 0) {
Object.assign(val, {rowSpan: classItem.length, colSpan: 1});
}else{
Object.assign(val, {rowSpan: 0, colSpan: 0});
}
})
});
// 多维数组扁平化
return _.flattenDeep(resArr);
},
这里用到了一些操作数组的方法，以下划线开头的，来自lodash，最后得到的一维数组就是table组件要用的data。
- 如果后台没有进行分组，我们需要先把
tableData转化为tableData2，我对算法也不太懂，所以先能实现功能就行，哪怕多写几个循环
// 将原始一维数据按照特定条件分组
groupTableData(arr) {
const classNames = []; // 保存班级的名字，一个名字就是一个分组
arr.forEach(v=>{
if(!classNames.includes(v.class)){
classNames.push(v.class);
}
});
const resArr = [];
classNames.forEach(className=>{
const groupItem = [];
arr.forEach(v=>{
if(v.class === className){
groupItem.push(v);
}
});
resArr.push(groupItem);
});
return resArr;
},
最后将上面几步合起来，我们就能从原始的数据得到table组件需要的数据了。table组件在合并单元格之后最好使用disabled-hover将hover样式去掉。
网友评论