element UI表格合并的方法
简单记一下使用element UI表格涉及到合并时的方法:
1. 合并行:
先对数据做处理:
dealWithData () { const result = [] let pos = 0 const data = this.tableData for (let i = 0; i < data.length; i++) { if (i === 0) { // 如果是第一条记录(即索引是0的时候),向数组中加入1 result.push(1) pos = 0 } else { // 这里company是我的数据里用到的,如果是合并其他的字段,改为其他的就可以了 if (data[i].company === data[i - 1].company) { // 如果useName相等就累加,并且push 0 result[pos] += 1 result.push(0) } else { // 不相等push 1 result.push(1) pos = i } } } this.spanArr = result },
然后在写渲染函数:
arraySpanMethod ({ column, rowIndex, columnIndex }) { // 这里我是对第二列进行合并行的,可以改为其他的列 if (columnIndex === 1) { const _row = this.spanArr[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } else { return { rowspan: 1, colspan: 1 } } },
2. 如何是合并列,也跟合并行差不多,处理函数找到合并列的规则,然后渲染函数,row和col换一下就可以了