前端用layui实现点击树节点实现表格联动的代码

首先需要在HTML中引入layui库和jQuery库，例如：

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>

然后，在HTML中添加树形结构和表格，例如：

<div class="layui-col-md4">
  <div class="layui-card">
    <div class="layui-card-header">树形结构</div>
    <div class="layui-card-body">
      <ul class="layui-tree" id="tree"></ul>
    </div>
  </div>
</div>
<div class="layui-col-md8">
  <div class="layui-card">
    <div class="layui-card-header">表格</div>
    <div class="layui-card-body">
      <table class="layui-table" id="table"></table>
    </div>
  </div>
</div>

接着，在JavaScript中渲染树形结构和表格，并实现点击树节点实现表格联动的功能，例如：

// 渲染树形结构
var treeData = [
  {
    title: '节点1',
    id: 1,
    children: [
      {
        title: '节点1.1',
        id: 2
      },
      {
        title: '节点1.2',
        id: 3
      }
    ]
  },
  {
    title: '节点2',
    id: 4,
    children: [
      {
        title: '节点2.1',
        id: 5
      },
      {
        title: '节点2.2',
        id: 6
      }
    ]
  }
];
layui.use('tree', function(){
  var tree = layui.tree;
  tree.render({
    elem: '#tree',
    data: treeData,
    click: function(obj){
      // 点击树节点时，获取节点id并渲染表格
      renderTable(obj.data.id);
    }
  });
});

// 渲染表格
function renderTable(id) {
  // 模拟数据
  var tableData = [
    { name: '张三', age: 20, sex: '男' },
    { name: '李四', age: 25, sex: '女' },
    { name: '王五', age: 30, sex: '男' }
  ];
  // 渲染表格
  layui.use('table', function(){
    var table = layui.table;
    table.render({
      elem: '#table',
      data: tableData,
      cols: [[
        {field: 'name', title: '姓名'},
        {field: 'age', title: '年龄'},
        {field: 'sex', title: '性别'}
      ]]
    });
  });
}

这样，点击树节点时，就会根据节点id渲染对应的表格数据。