layui 实现三层树结构，点击每一层节点对应显示的table表格内容都不一样

可以使用 layui 的 tree 模块实现三层树结构，然后通过监听树节点的点击事件，根据节点的 id 或其他属性来动态加载对应的表格内容。

具体实现步骤如下：

1. 在 HTML 页面中引入 layui 的 tree 和 table 模块：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/css/layui.css" integrity="sha384-+fT8rHj+bm5l2Khez9ZvL8rL9zcKndrRmXjQ7O8H3Wv4ZoNQ5Ox3K+4cS8l8WVJk" crossorigin="anonymous">
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.all.js" integrity="sha384-m1mJZr1V8hY06n0ZsFpZeJ1Nw5g6kFBqT8PbCg2z5xU2s1l4b9jcd6X5XO8UVV2n" crossorigin="anonymous"></script>

2. 在 HTML 页面中创建一个具有指定 id 的 div 元素，用于渲染树结构和表格：

<div id="tree-table"></div>

3. 在 JavaScript 中定义树结构的数据和表格数据，可以使用数组来存储：

// 树结构的数据
var treeData = [{
  id: 1,
  title: '一级节点1',
  children: [{
    id: 11,
    title: '二级节点1-1',
    children: [{
      id: 111,
      title: '三级节点1-1-1'
    }, {
      id: 112,
      title: '三级节点1-1-2'
    }]
  }, {
    id: 12,
    title: '二级节点1-2',
    children: [{
      id: 121,
      title: '三级节点1-2-1'
    }, {
      id: 122,
      title: '三级节点1-2-2'
    }]
  }]
}, {
  id: 2,
  title: '一级节点2',
  children: [{
    id: 21,
    title: '二级节点2-1',
    children: [{
      id: 211,
      title: '三级节点2-1-1'
    }, {
      id: 212,
      title: '三级节点2-1-2'
    }]
  }, {
    id: 22,
    title: '二级节点2-2',
    children: [{
      id: 221,
      title: '三级节点2-2-1'
    }, {
      id: 222,
      title: '三级节点2-2-2'
    }]
  }]
}];

// 表格的数据
var tableData = {
  111: [{name: '张三', age: 18}, {name: '李四', age: 20}],
  112: [{name: '王五', age: 22}, {name: '赵六', age: 24}],
  121: [{name: '孙七', age: 26}, {name: '周八', age: 28}],
  122: [{name: '吴九', age: 30}, {name: '郑十', age: 32}],
  211: [{name: '刘一', age: 34}, {name: '陈二', age: 36}],
  212: [{name: '张三', age: 38}, {name: '李四', age: 40}],
  221: [{name: '王五', age: 42}, {name: '赵六', age: 44}],
  222: [{name: '孙七', age: 46}, {name: '周八', age: 48}]
};

4. 使用 layui 的 tree 模块来渲染树结构，并监听节点的点击事件：

layui.use(['tree', 'table'], function() {
  var tree = layui.tree;
  var table = layui.table;

  // 渲染树结构
  tree.render({
    elem: '#tree-table',
    data: treeData,
    click: function(node) {
      // 获取节点的 id
      var nodeId = node.id;

      // 根据节点 id 加载对应的表格数据
      table.render({
        elem: '#tree-table',
        data: tableData[nodeId],
        cols: [[
          {field: 'name', title: '姓名'},
          {field: 'age', title: '年龄'}
        ]]
      });
    }
  });
});

5. 运行程序，在浏览器中查看效果。每当点击树结构中的某个节点时，都会根据节点的 id 动态加载对应的表格数据，并在页面上显示出来。

希望这个实现方式能够帮助到你~