如何从点击的元素中获取Tabulator的cell和row对象？

你可以借助Tabulator内置的DOM关联API，从点击的图标元素快速定位到对应的单元格或行对象，具体方法如下：

• 获取Cell对象
  从触发点击的图标元素出发，先通过closest方法找到它所在的Tabulator单元格DOM（带有tabulator-cell类），再调用Tabulator实例的getCellFromElement方法：

  // e为点击事件对象，target是点击的图标元素
  const cellDom = e.target.closest('.tabulator-cell');
  const cell = table.getCellFromElement(cellDom);
  

• 获取Row对象
  有两种实现路径：

  1. 从已拿到的Cell对象直接获取Row：

     const row = cell.getRow();
     

  2. 直接从图标元素定位到Tabulator行DOM（带有tabulator-row类），再调用getRowFromElement方法：

     const rowDom = e.target.closest('.tabulator-row');
     const row = table.getRowFromElement(rowDom);
     

• 格式化器内绑定事件的更优写法
  如果是在自定义格式化器里给图标绑定点击事件，其实可以直接在onRendered回调中拿到cell对象，无需反向查找：

  function(cell, formatterParams, onRendered){
      const editIcon = document.createElement('i');
      editIcon.className = 'bi bi-pencil row-edit';
      editIcon.addEventListener('click', () => {
          // 直接使用cell和row对象
          console.log(cell);
          console.log(cell.getRow());
      });
  
      const deleteIcon = document.createElement('i');
      deleteIcon.className = 'bi bi-trash row-delete';
      deleteIcon.addEventListener('click', () => {
          console.log(cell.getRow());
      });
  
      const cellDom = cell.getElement();
      cellDom.appendChild(editIcon);
      cellDom.appendChild(document.createTextNode(' '));
      cellDom.appendChild(deleteIcon);
  
      return '';
  };
  

注意：上述代码中的table是你的Tabulator实例对象，要确保它在事件回调的作用域内可访问。

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