动态合并单元格
思路
-
①先获取到相关的数据，但是在获取对象里的属性时为undefined，所以哦通过加一个定时器解决，然后遍历分析所有的数据。
-
但是加了定时器之后，写在定时器里的内容（变量，函数等）在外层作用域又无法获取到进行使用，因此这里就通过在定时器里将需要的数据通过localStorage先本地缓存起来，然后再在外层作用中通过获取本地缓中存储好的数据，这样就能拿到数据了。
-
②设置一个空数组spanArr，后面记录下每一行的rowspan（合并行数）和colspan（合并列数）
-
③先将初始的rowspan和colspan默认值都设置为1
const obj = {
rowspan: 1,
colspan: 1
}
- ④先将第一个需要进行合并的数据的rowspan和colspan设置为1，然后push到数组spanArr中。
- ⑤若前后两项的分类相同,那么后面那一项的rowspan和colspan都设置为0，然后找到相同项中第一项（通过数组的findIndex方法进行查找）
rowspan列的值加1 - ⑥若前后两个值不相同，则是 一个新的分类合并的开始 ，再将新的分类的第一项重新设置成默认值
js代码
// 获取所有数据
const allList = computed(
() => store.state.ListModule.allListInfo
)
//因为allList是action异步获取的，在打印allList里的属性时为undefined
因此通过setTimeout来延时获取，这样就能获取到allList.value的值了
setTimeout(() => {
LocalCache.setCache('allList', allList.value)
}, 1000)
var allListValue = LocalCache.getCache('allList')
// 遍历所有数据 记录每一行的rowspan和colspan
const getSpanData = () => {
var spanArr: any[] = []
for (var i = 0; i < allListValue.length; i++) {
// 设置初始的默认值
const obj = {
rowspan: 1,
colspan: 1
}
if (i === 0) {
// 第一项直接设置成默认的值
obj.rowspan = 1
obj.colspan = 1
spanArr.push(obj)
} else {
if (allListValue[i].categoryId ===
allListValue[i - 1].categoryId
) {
// 前后两项的分类相同,那么后面那一项的rowspan和colspan都设置为0
obj.rowspan = 0
obj.colspan = 0
spanArr.push(obj)
// 然后找到相同项中第一项 rowspan列的值加1
var index = allListValue.findIndex((item)
=> item.categoryId === allListValue[i].categoryId
)
spanArr[index].rowspan++
} else {
// 前后两个值不相同 一个新的分类开始 重新设置成默认值
obj.rowspan = 1
obj.colspan = 1
spanArr.push(obj)
}
}
}
return spanArr
}
var spanArr = getSpanData()
const objectSpanMethod = ({
row, column, rowIndex, columnIndex })
=> {
// 对第一列每一个数据进行合并操作
if (columnIndex === 0) {
if (spanArr) {
let rowspan = spanArr[rowIndex].rowspan
let colspan = spanArr[rowIndex].colspan
return {
rowspan, colspan }
}
}
}