如何保留在 setColumns() 上编辑的单元格？

Question

我有制表符与 excel 一起使用，就像底部的选项卡一样，可以更改显示的列。它还会突出显示已编辑的任何行，并突出显示已编辑的每个单元格。但是当我切换选项卡时，编辑过的行保持高亮显示，但如果我切换回上一个选项卡，被编辑的单元格不再高亮显示。

this.tabulator = new Tabulator(this.$refs['example-table'], {
        data: [],
        height: "500px",
        index:"title",
        placeholder: "No Data Set",
        footerElement: $("#table-controls").get(0),
        columns: this.gtabColumns,
        cellEdited: function(cell) {
            if((_.isNil(cell.getOldValue()) || _.isEmpty(cell.getOldValue())) 
                    && (_.isNil(cell.getValue()) || _.isEmpty(cell.getValue()))) {
                return;
            }
            $(cell.getElement()).css("background-color", "#67f165");
            $(cell.getRow().getElement()).css("background-color", "#d1fbd0");
        },
    });

Answer 1

发生这种情况是因为您试图从 cellEdited 函数内部直接操作 table 中的元素。

因为 Tabulator 使用虚拟 DOM，所以尝试直接操作 table 中的任何元素都是不安全的。您应该只更改列定义中 formatter 或 rowFormatter[=26] 中的单元格元素=] 行。其他任何地方都不安全。

在您的情况下，您需要这样的单元格格式化程序：

var editedCellFormatter = function(cell){ if(cell.oldValue !== null){ cell.getElement().style.backgroundColor = "#67f165"; } return cell.getValue(); }

然后您可以在列定义中分配：

{title:"Name", field:"name", formatter:editedCellFormatter}

如何保留在 setColumns() 上编辑的单元格？

How to retain cells edited on setColumns()?

tabulator