制表符行格式消除了悬停效果，而单元格格式则没有

Question

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

颜色对两者都有效，但第一行失去了悬停效果。

有没有办法让行着色与单元格一样？

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

代码也在这里...

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 文件应用的颜色。

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

您还可以使用 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

制表符行格式消除了悬停效果，而单元格格式则没有

Tabulator row formatting removes hover effect, while cell formatting doesn't

javascript

css

tabulator