场景:hover到某个单元格上对应的行列单元格颜色改变
需要属性
cell-class-name 为对应行列增加索引值
cell-style 修改对应列单元格颜色
代码
// 滑动选中
hoverCall: function (row, column, cell, event) {
this.getCellIndex = column.columnIndex
this.getRowIndex = row.index
},
cellMouseLeave() {
this.getCellIndex = null
this.getRowIndex = null
},
// 设置列对象(cell)的样式(style)
selectedCellStyle({ column, columnIndex, row, rowIndex }) {
if (this.getCellIndex === columnIndex) {
return {
'background-color': 'RGBA(230, 241, 253, 1)',
}
}
},
// 特殊场景 不为0和关的需要标记一下
tableCellClassName({ column, columnIndex, row, rowIndex }) {
column.columnIndex = columnIndex
row.index = rowIndex
if (!['关', '0'].includes(row[column.property])) {
return this.getCellIndex == columnIndex ||
this.getRowIndex == rowIndex
? 'setclass1'
: 'setclass'
}
},
.setclass {
background: rgba(0, 108, 240, 0.15);
}
.setclass1 {
background: #d1ddf9 !important;
}