Layui treeTable 组件 setRowChecked 方法使用指南

概述

Layui 的 treeTable 组件是一个功能强大的树形表格组件，但在实际使用过程中，开发者可能会遇到 setRowChecked 方法不完全生效的问题。本文将深入分析该问题的原因，并提供最佳实践方案。

问题现象

当开发者尝试使用 treeTable.setRowChecked 方法时，发现以下情况：

1. 使用 "all" 参数无法选中所有行
2. 使用数组参数（如 [2] 或 ["2"]）无法选中指定行
3. 只有直接指定行索引（如 "2"）或完整行数据时才能生效

根本原因

根据 Layui 官方文档，setRowChecked 方法的 index 参数仅支持两种形式：

1. 行下标（字符串形式，如 "2" 或 "6-0-6"）
2. 完整的行数据对象

该方法明确不支持以下形式：

1. 字面量 "all"
2. 数组形式的多个索引（如 [2,3,4]）

解决方案

单行选中方案

对于需要选中单行的情况，可以直接使用行索引或行数据：

// 使用行索引
treeTable.setRowChecked(tableId, {
    type: "checkbox",
    index: "2",  // 行索引
    checked: true
});

// 使用行数据
treeTable.setRowChecked(tableId, {
    type: "checkbox",
    index: res.data[2],  // 完整行数据
    checked: true
});

多行选中方案

对于需要批量选中多行的情况，可以采用遍历方案：

1. 首先获取需要选中的行数据
2. 遍历这些行数据，逐个调用 setRowChecked 方法

// 假设 id_list 是需要选中的ID数组
const matchedData = res.data.filter(item => id_list.includes(item.id));

matchedData.forEach(item => {
    treeTable.setRowChecked(tableId, {
        type: "checkbox",
        index: item.LAY_DATA_INDEX,  // 或直接使用 item
        checked: true
    });
});

最佳实践

1. 数据准备阶段：在渲染表格前，先确定需要选中的行ID
2. 渲染完成后处理：在 done 回调中执行选中操作
3. 错误处理：添加必要的错误处理逻辑，防止因数据不一致导致的异常

treeTable.render({
    // 其他配置...
    done: function(res) {
        try {
            const selectedIds = [8, 9, 18]; // 需要选中的ID
            const selectedRows = res.data.filter(row => selectedIds.includes(row.id));
            
            selectedRows.forEach(row => {
                treeTable.setRowChecked(this.config.id, {
                    type: "checkbox",
                    index: row,
                    checked: true
                });
            });
        } catch (e) {
            console.error("选中行时出错:", e);
        }
    }
});

注意事项

1. 确保行数据中包含唯一标识字段（如 id）
2. 在异步操作中要注意时序问题，确保数据加载完成后再执行选中操作
3. 对于大量数据，考虑性能优化，避免频繁DOM操作

通过遵循以上方案，开发者可以有效地解决 treeTable 组件中 setRowChecked 方法的使用问题，实现灵活的行选中功能。