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 函数内部操作表中的元素。

由于制表器使用虚拟DOM，因此尝试直接操作表中的任何元素并不安全。您只应在列定义的 formatter 或行的 rowFormatter 中更改单元格元素。其他任何地方都不安全。

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

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

    return cell.getValue();
}

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

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

如何保留在setColumns（）中编辑的单元格？

1 个答案: