基于数据表数据生成带checkbox的treeview并联动右侧表格展示数据

统一数据源设计 #

核心要求是全场景复用同一份数据源，避免多份数据同步导致的状态不一致问题，推荐结构如下：

// 公共数据源结构示例
const sharedData = [
  {
    nodeId: "dept-1",
    label: "研发部",
    isChecked: false,
    children: [
      {
        nodeId: "dept-1-1",
        label: "前端组",
        isChecked: false,
        // 挂载右侧表格需要的关联数据
        relatedTableInfo: {
          department: "前端组",
          staffCount: 12,
          leader: "张三",
          monthlyCost: "180000"
        },
        children: []
      }
    ]
  }
]

所有树的勾选状态变更、表格数据渲染都只基于这份sharedData修改和读取。

带复选框树视图实现要点 #

• 复选框要支持父子联动逻辑：父节点勾选自动全选所有子节点，子节点全部勾选时父节点自动设为选中状态，子节点部分勾选时父节点显示半选状态
• 勾选事件触发时仅修改sharedData中对应节点的isChecked字段值，不要单独维护树的状态变量
• 不同技术栈可直接使用成熟组件快速实现，不需要手动造轮子：
  • Vue 项目可直接使用 Element Plus 的 el-tree 组件，开启 show-checkbox 配置即可
  • React 项目可直接使用 Ant Design 的 Tree 组件，开启 checkable 配置即可
  • 原生JS项目可引入 jstree 轻量库实现树结构
• 若要手动实现，通过递归遍历树节点即可批量修改勾选状态

右侧表格联动逻辑 #

表格的渲染数据源不需要单独维护，直接从sharedData中实时过滤得到，示例逻辑如下：

// 表格计算数据源（Vue 中可以写为 computed，React 可以写为 useMemo 缓存结果）
function getTableData() {
  const result = []
  // 递归遍历所有树节点
  function traverse(nodeList) {
    nodeList.forEach(node => {
      // 勾选的节点才把关联数据加入表格数据源
      if (node.isChecked && node.relatedTableInfo) {
        result.push(node.relatedTableInfo)
      }
      if (node.children?.length) {
        traverse(node.children)
      }
    })
  }
  traverse(sharedData)
  return result
}

如果业务需要勾选父节点时只展示子节点的关联数据，或者同时展示父子节点的关联数据，调整上述过滤规则即可。

可选优化方案 #

• 树节点数量超过1000时建议开启虚拟滚动，避免大量DOM渲染导致页面卡顿
• 勾选状态可存入localStorage做本地持久化，页面刷新后保留用户勾选结果
• 可新增全选、反选、清空勾选的快捷操作按钮，提升操作效率

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