表格器行格式化可以消除悬停效果，而单元格格式化则不会。

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 inline，你覆盖了从css文件中应用的颜色。

你可以把这些css应用到你的应用css中，并使用 !important因此，即使是内联样式的情况下也会被应用。

你也可以用JavaScript事件监听器来维护它。 但如果使用虚拟dom，可能就不容易维护了。 我不建议尝试这样做。

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

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

这是你修改后的例子。https:/codesandbox.iosruntime-cache-xpyy9?file=srcindex.js。