Tabulator使用cellFormatter设置单元格背景色后丢失hover与选中态背景色

问题核心原因 #

你遇到的问题本质是两个CSS规则共同作用的结果：

1. cellFormatter修改单元格样式时默认是给tabulator-cell元素添加内联样式，内联样式的优先级远高于类选择器样式
2. 你之前设置的选中、hover样式是作用在父元素.tabulator-row上的，父元素的背景色默认会被子元素的背景色完全覆盖，所以行的样式看起来不生效。

方案1（推荐）：改用类名控制单元格样式 #

不要在cellFormatter里直接写style修改背景，改为给符合条件的单元格添加自定义类名，然后在CSS中分层控制样式优先级：

1. 在cellFormatter中添加类的逻辑示例：

// 特定值单元格加自定义类
if(cell.getValue() == '你的判断条件') {
  cell.getElement().classList.add('custom-cell-bg')
}
// 冻结列单元格加自定义类
if(column.isFrozen()) {
  cell.getElement().classList.add('frozen-cell-bg')
}

2. 替换你的CSS为以下内容：

/* 普通状态下自定义单元格样式 */
.custom-cell-bg {
  background-color: 你之前设置的绿色/黄色值;
}
.frozen-cell-bg {
  background-color: 你之前设置的冻结列背景色;
}

/* 行选中时覆盖所有单元格样式 */
.tabulator-row.tabulator-selected .tabulator-cell {
  background-color: rgb(250, 34, 203) !important;
}

/* 行hover时覆盖所有单元格样式 */
.tabulator-row:hover .tabulator-cell {
  background-color: rgb(0, 0, 0) !important;
  color: rgb(0, 119, 255) !important;
  font-weight: 900;
}

方案2：不改cellFormatter逻辑的临时兼容方案 #

如果你不想改cellFormatter的内联样式逻辑，直接用以下CSS即可，通过选择器直接命中所有行内单元格，强制覆盖内联样式：

.tabulator-row.tabulator-selected .tabulator-cell,
.tabulator-row:hover .tabulator-cell {
  background-color: inherit !important;
}
.tabulator-row.tabulator-selected {
  background-color: rgb(250, 34, 203) !important;
}
.tabulator-row:hover {
  background-color: rgb(0, 0, 0) !important;
  color: rgb(0, 119, 255) !important;
  font-weight: 900;
}

这个方案的原理是强制让单元格的背景色继承父元素行的背景色，行的背景色设置就能透出来了。

内容的提问来源于stack exchange，提问作者RealMalWare