1.vue版本和view design 版本
javascript
{
"vue": "^2.6.11",
"view-design": "^4.7.0",
}
2.Data中定义数据
spanArr: [], // 某一列下需要合并的行数
pos: 0// 索引
// 注意点: 在获取列表前,需要重置 this.spanArr = []
注意点2: 获取列表的请求失败,页需要重置数据(就是列表数据是接口返回的对象中的一个字段,这个列表的标题和数据都是后端返回的,同时返回了其他字段,在请求前你需要重置所有数据,同时重置)
3.方法
javascript
getSpanArr(data) {
data.forEach((item, index) => {
// 如果是第一个数据,就将列表spanArr添加一个1,表示暂时只有一个名字相同的、且将索引pos赋值为0
if (index === 0) {
this.spanArr.push(1)
this.pos = 0
} else {
// 判断当前元素与上一个元素是否相同(这里我们拿要合并的日期date为例)
if (item.time === data[index - 1].time) {
// 如果相同就将索引为 pos 的值加一
this.spanArr[this.pos] += 1
// 且将数组添加 0
this.spanArr.push(0)
} else {
// 如果元素不同了,就可以通过索引为 pos 的值知道应该需要合并的行数
// 同时,我们再次添加一个值1,表示重新开始判断某个字段的重复次数
this.spanArr.push(1)
// 同时 索引加一
this.pos = index
}
}
})
},
// 合并单元格的
handleSpan ({ rowIndex, columnIndex }) {
if (columnIndex === 0) {
const rowspan = this.spanArr[rowIndex]
return {
// 将需要合并的行数赋值给rowspan
rowspan: rowspan,
// colspan有两种情况要不是0不显示,要不是1显示,根据rowspan( _row)来确定;
colspan: rowspan > 0 ? 1 : 0
}
}
},