LWC lightning-tree-grid选中父行时无法自动选中子行问题

lightning-tree-grid 的 selected-rows 属性本身不会自动处理父子行联动勾选，需要手动实现选中事件的递归处理逻辑。以下是具体解决步骤及代码示例：

核心思路 #

1. 监听表格的 onrowselection 事件，获取选中/取消选中的行数据
2. 编写递归函数，遍历父行的所有嵌套子节点，收集或移除子行ID
3. 更新 selected-rows 数组，确保包含父行及所有层级的子行ID

完整代码示例 #

HTML 部分 #

<lightning-tree-grid
    data={treeData}
    columns={columns}
    key-field="id"
    selected-rows={selectedRows}
    onrowselection={handleRowSelection}
    hide-checkbox-column="false"
>
</lightning-tree-grid>

JS 部分 #

import { LightningElement, track } from 'lwc';

export default class TreeGridSelection extends LightningElement {
    @track selectedRows = [];
    @track treeData = [
        {
            id: '1',
            name: '父节点1',
            _children: [
                { id: '1-1', name: '子节点1-1' },
                { id: '1-2', name: '子节点1-2', _children: [{ id: '1-2-1', name: '孙节点1-2-1' }] }
            ]
        },
        {
            id: '2',
            name: '父节点2',
            _children: [{ id: '2-1', name: '子节点2-1' }]
        }
    ];
    columns = [
        { label: '名称', fieldName: 'name', type: 'text' }
    ];

    handleRowSelection(event) {
        const selectedRows = event.detail.selectedRows;
        const deselectedRows = event.detail.deselectedRows;
        const allSelectedIds = new Set(this.selectedRows);

        // 处理选中行：递归添加所有子节点ID
        selectedRows.forEach(row => {
            allSelectedIds.add(row.id);
            if (row._children?.length) {
                this.collectChildIds(row._children, allSelectedIds);
            }
        });

        // 处理取消选中行：递归移除所有子节点ID（可选，根据需求调整）
        deselectedRows.forEach(row => {
            allSelectedIds.delete(row.id);
            if (row._children?.length) {
                this.removeChildIds(row._children, allSelectedIds);
            }
        });

        this.selectedRows = Array.from(allSelectedIds);
    }

    // 递归收集所有子节点ID
    collectChildIds(children, idSet) {
        children.forEach(child => {
            idSet.add(child.id);
            if (child._children?.length) {
                this.collectChildIds(child._children, idSet);
            }
        });
    }

    // 递归移除所有子节点ID
    removeChildIds(children, idSet) {
        children.forEach(child => {
            idSet.delete(child.id);
            if (child._children?.length) {
                this.removeChildIds(child._children, idSet);
            }
        });
    }
}

常见问题排查 #

1. 数据结构错误：确保子节点存储在 _children 字段下，这是 lightning-tree-grid 识别嵌套结构的固定字段
2. 事件未监听：必须绑定 onrowselection 事件才能触发联动逻辑
3. 递归逻辑不全：如果只处理了一级子行，嵌套更深的孙节点不会被选中，需要递归遍历所有层级
4. 选中集合覆盖：直接赋值 selectedRows 时要合并已有选中项，避免丢失之前的选中状态

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