Tabulator表格初始化时设置第一行首个可编辑单元格自动获焦

问题分析 #

你的代码存在两个核心问题：

1. 变量名笔误：定义了el却调用cell.focus()，导致报错无法执行聚焦逻辑；
2. 聚焦方式错误：直接对单元格DOM元素调用focus()无效，Tabulator的可编辑单元格需要先激活编辑器，再聚焦编辑器的输入控件。

解决步骤 #

1. 修正变量名引用，确保逻辑可执行；
2. 通过Tabulator提供的cell.edit()方法激活单元格编辑状态，再获取编辑器元素进行聚焦（因编辑器渲染存在异步性，需用setTimeout确保元素已生成）。

修正后的完整代码 #

'use strict';
const DateTime = luxon.DateTime;

let dt = DateTime.local();

class Item {
    constructor() {
        this.id = 0;
        this.name = "";
        this.dob = "";
        this.age = "";
        this.dupdt = "";
    }
}

var tableData = [];

let item = new Item();
item.dupdt = dt.toFormat('dd/MM/yyyy');
tableData.push(item);

var table = new Tabulator("#table", {
    data: tableData,
    layout: "fitColumns",
    addRowPos: "bottom",
    movableColumns: true,
    resizableColumnFit: true,
    tabEndNewRow: function (row) {
        let item = new Item();
        item.dupdt = dt.toFormat('dd/MM/yyyy');

        return item;
    },
    columns: [
        { title: "Id", field: "id", formatter: "rownum", width: 30, minWidth: 30, hozAlign: "center" },
        { title: "Name", field: "name", editor: "input" },
        { title: "Age", field: "age", editor: "number" },
        {
            title: "Date", field: "dupdt", editor: "date", editorParams: {
                format: "dd/MM/yyyy",
                verticalNavigation: "table",
            }
        }
    ],
});

table.on("renderCompleted", function () {
    const row = table.getRowFromPosition(1);
    const targetCell = row.getCells()[1]; // 获取第一行的Name列单元格（首个可编辑列）
    
    // 激活单元格编辑状态
    targetCell.edit(true);
    
    // 延迟聚焦编辑器元素，确保编辑器已渲染完成
    setTimeout(() => {
        const editorElement = targetCell.getEditorElement();
        if (editorElement) {
            editorElement.focus();
        }
    }, 10);
});

备选方案：利用cellEditing事件 #

如果担心renderCompleted时机仍有偏差，可以监听单元格编辑事件，在编辑器激活时直接聚焦：

table.on("cellEditing", function(cell){
    // 判断是否是第一行的Name列单元格
    if(cell.getField() === "name" && cell.getRow().getPosition() === 1){
        setTimeout(() => {
            const editorEl = cell.getEditorElement();
            editorEl?.focus();
        }, 10);
    }
});

内容的提问来源于stack exchange，提问作者Federico