elementUI合并单元格
<el-table :data="tableDataFormat" border :header-cell-style="{background:'#FAFAFA'}" :span-method="arraySpanMethod" :row-class-name="rowClassName" @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseLeave">
data(){
return {
spanArr:[],
tableData:[], //元数据
tableDataFormat:[],//format后的数据
cellIndex: -1,
}
},
// 鼠标进入单元格
handleMouseEnter(row, column, cell, event) {
this.tableDataFormat.forEach((item) => {
// console.log(row.order,item.order)
if (row.order === item.order) {
this.cellIndex = row.order;
}
})
},
// 给相应的rowIndex添加类名
rowClassName({ row, rowIndex }) {
let r = -1;
this.tableDataFormat.forEach((item) => {
if (this.cellIndex === row.order) {
r = rowIndex;
}
});
if (rowIndex === r) {
return 'hover-row';
}
},
// 鼠标离开
handleMouseLeave(row, column, cell, event) {
this.cellIndex = -1;
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 9) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
// console.log(`rowspan:${_row} colspan:${_col}`)
return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
rowspan: _row,
colspan: _col
}
}
},
getSpanArr(data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].strategy_id === data[i - 1].strategy_id) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
// console.log(this.spanArr)
}
},
