一 起因
有遇到一个前端展示页面遇到需要合并相同行的需求,第一次接触遇到了各种问题,我也找了百度,最终磕磕绊绊下中了出来,代码跟网上的差不多一样,我重点讲一下我遇到的问题
二 遇到的问题
需求:同一个任务名称合并
这是2幅图,初始图就是直接从后端得到数据,前端直接展示的,未做任何处理,效果图就是最终实现的
初始图
效果图
难点
1 不熟悉,第一次接触
2 如何让相同的任务名称在一起
3 怎么合并
解决
element 上面有一个方法span-method
我就结合自己的代码来讲一下
如果大家有看过其它帖子,应该大部分都是例子,然后数据已经是排序好的,就可能给初学者造成一定的难度-没思路解决排序的问题
我这里给出我自己的代码
List<ResearchTasks> tasks = resourceReserveMapper.selectResearchTasksList(researchTasks);
ArrayList<ResearchTasks> temporaryList = new ArrayList<>();
//排序,使相同名字的数据在相邻的地方
List<String> collect = tasks.stream().map(ResearchTasks::getName).distinct().collect(Collectors.toList());
for (int i = 0; i < collect.size(); i++) {
for (int j = 0; j <tasks.size() ; j++) {
if (collect.get(i).equals(tasks.get(j).getName())){
temporaryList.add(tasks.get(j));
}
}
}
return temporaryList;
tasks就是未做处理的数据,temporaryList就是排序好的数据,我先用stream流的方式将初始数据的任务名称都得到然后去除重复的,然后双层循环判断,这样就实现了相同任务名称的数据都在相邻的地方
然后回到前端,如何实现动态合并行
rowspan() {
console.log(this.planList)
this.planList.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1)
this.position = 0
} else {
if(this.planList[index].name === this.planList [index - 1].name) {
this.spanArr[this.position] += 1 //相同值第一个出现的位置,统计需要合并多少行,指针往后移动一位
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.position = index
}
}
})
},
//合并单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 2) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
console.log('rowIndex', rowIndex) // 0, 1, 2, 3
console.log('spanArr', this.spanArr) // [2, 0, 2, 0]
console.log('_row', _row)
console.log('_col', _col)
return {
rowspan: _row,
colspan: _col
}
}
},
前端坑特别多,rowspan方法最好执行一次,在created里执行,但是我不知道为什么没有得到后端返回的数据,明明得到planlist数据在rowspan方法前面执行,然后就想出办法在得到后端数据里方法再执行rowspan方法,然后又因为getlist方法执行了2次,导致rowspan方法执行了2次,导致spanarr数组存了2遍值,当时是真的找了好久的问题啊,可不是现在三言两语就讲清楚了
解决办法就是先吧数组放空
那么rowspan方法的作用是什么呢
就是为分行做准备
可以结合我之前放的图进行分析
2代表合并2行,0代表不显示,1代表合并一行
注意一下objectspanmethod方法是循环的 也有图显示我打印语句是循环显示的,是根据数据来循环的
看objectspanmethod方法 columnIndex代表第二列执行操作 也就是任务名称那一栏
rowindex就代表行的序号,当rowindex为1的时候就是0,代表那一行的任务名称不显示,再去看效果图是不是前面2行合并了。
然后这时候如果还没看懂rowspan方法的就可以回过头来看看了
序号为1时(效果图)对应的index为0,spanarr=[1]
序号为2时 spanarr=[2,0]
序号为3时,就跟前面的名称不符合了,spanarr=[2,0,1]
......
然后除了后端可以处理数据,前端也可以用map来处理数据,只不过我本人是后端开发,更习惯用java来处理数据。