制表符行格式删除悬停效果，而单元格格式不

Question

我的目标是根据单元格值设置行的背景颜色。

着色适用于两者，但第一行失去了悬停效果。

Codesandbox

有没有办法让行着色表现得像单元格一样？

这样做的原因是保持交替的行颜色，同时在其上放置背景，而不会丢失悬停。

这也是这里的代码......

let data = [
  { string: "aaaaaaaaaa", number: 0 },
  { string: "bbbbbbbbbb", number: 0 },
  { string: "cccccccccc", number: 1 },
  { string: "dddddddddd", number: 1 },
  { string: "eeeeeeeeee", number: 0 },
  { string: "ffffffffff", number: 1 },
  { string: "gggggggggg", number: 0 },
  { string: "hhhhhhhhhh", number: 0 }
];

var table = new Tabulator("#example-table", {
  data: data,
  rowFormatter: row => {

    let data = row.getData();

    if (data.number === 1) {
      row.getElement().style.cssText += "background: rgba(255, 0, 0, 0.5);";
    }
  },
  columns: [
    {
      title: "string",
      field: "string"
    },
    {
      title: "number",
      field: "number",
      formatter: cell => {
        if (cell.getValue() === 0) {
          cell.getElement().style.cssText += "background: rgba(255, 255, 0, 0.5);";
        }
        return cell.getValue();
      }
    }
  ]
});

Answer 1

使用 css :hover 并设置 backgroundColor 应用悬停颜色。因此，当您应用 backgroundColor 内联时，您将覆盖从 css 文件应用的颜色。

您可以使用 !important 获取 css 并将其应用到您的应用 css 中，这样即使在内联样式的情况下也可以应用它。

您还可以在 mouseout/in 上使用 JavaScript 事件侦听器对其进行维护。使用虚拟 dom 可能不容易维护。我不建议尝试这样做。

要覆盖css，我相信这就是你所需要的。

.tabulator-row.tabulator-selectable:hover {
  background-color: #bbb !important;
}

这是您修改的示例。 https://codesandbox.io/s/runtime-cache-xpyy9?file=/src/index.js