向父节点添加行后修改其单元格展示子节点数量的实现方法

核心思路 #

优先用数据驱动的响应式逻辑实现，避免手动操作DOM维护状态。

• 方案1：响应式框架场景（Vue/React/Angular等）
  所有树形表格组件的父节点都会内置children字段存储子节点列表，直接给第二个单元格绑定父节点.children.length的计算值即可：

  // 列配置示例（以Vue Ant Design Table为例）
  const columns = [
    // 首列省略...
    {
      title: '子项数量',
      customRender: ({ record }) => record.children?.length || 0
    }
  ]
  

  只要你调用addRow方法时是往对应父节点的children数组里新增数据，框架的响应式能力会自动更新单元格内容，新增、删除子节点都不需要额外写维护逻辑。
• 方案2：原生JS/无响应式场景
  封装一层你正在使用的addRow方法，每次新增完成后主动更新父节点的第二个单元格：

  // 替换原有addRow调用，统一走封装后的方法
  function addRowWithCountUpdate(parentNode, rowData) {
    // 执行原有新增行逻辑
    addRow(parentNode, rowData)
    // 更新父节点第二个单元格（单元格索引从0计数，所以取索引1）
    parentNode.cells[1].innerText = parentNode.children.length
  }
  

  后续所有新增子节点的操作都调用这个封装方法，即可保证计数实时同步。如果有删除子节点的需求，按同样逻辑给删除方法加一层计数更新即可。

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