view deign 和 vue2 合并单元格的方法

1.vue版本和view design 版本

{"vue": "^2.6.11","view-design": "^4.7.0",
}

2.Data中定义数据

spanArr: [], // 某一列下需要合并的行数
pos: 0// 索引

// 注意点： 在获取列表前，需要重置 this.spanArr = []
注意点2: 获取列表的请求失败，页需要重置数据（就是列表数据是接口返回的对象中的一个字段，这个列表的标题和数据都是后端返回的，同时返回了其他字段，在请求前你需要重置所有数据，同时重置）

3.方法

getSpanArr(data) {data.forEach((item, index) => {// 如果是第一个数据，就将列表spanArr添加一个1，表示暂时只有一个名字相同的、且将索引pos赋值为0if (index === 0) {this.spanArr.push(1)this.pos = 0} else {// 判断当前元素与上一个元素是否相同（这里我们拿要合并的日期date为例）if (item.time === data[index - 1].time) {// 如果相同就将索引为 pos 的值加一this.spanArr[this.pos] += 1// 且将数组添加 0this.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 {// 将需要合并的行数赋值给rowspanrowspan: rowspan,// colspan有两种情况要不是0不显示，要不是1显示，根据rowspan（ _row）来确定；colspan: rowspan > 0 ? 1 : 0}}
},