好，这个你问得很对点 👍
LayUI 的下拉树 TreeSelect 是后台系统里非常高频、但文档又写得不太友好的组件。
我按 「是什么 → 怎么用 → 参数 → 事件 → 常见坑」 给你一次性讲清楚。

⚠️ 先说明
LayUI 官方并没有内置 TreeSelect，
常用的是 第三方扩展组件，最流行的是：
👉 xm-select（树模式） 或 treeSelect 扩展

下面我 两个方案都讲，你用哪个都能对得上。

一、什么是 TreeSelect？

TreeSelect = 下拉框 + 树结构

典型用途：

• 部门选择
• 菜单选择
• 分类选择
• 权限配置

UI 形态：

[ 请选择部门 ▼ ]
   ├─ 总公司
   │   ├─ 技术部
   │   └─ 产品部
   └─ 分公司

二、方案一（最常用）：layui-treeSelect 扩展

1️⃣ 引入 treeSelect

下载

• GitHub：layui-treeSelect
• 放到：

/layui/extends/treeSelect.js

注册模块

layui.config({
  base: '/layui/extends/'
}).extend({
  treeSelect: 'treeSelect'
});

2️⃣ HTML 结构

<input type="text" id="deptSelect" placeholder="请选择部门" class="layui-input">

3️⃣ 基本初始化（核心）

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

  treeSelect.render({
    elem: '#deptSelect',
    data: '/dept/tree',   // 后端树接口
    type: 'get',
    placeholder: '请选择部门',
    search: true,
    click: function (d) {
      console.log(d);
      // d.current.id
      // d.current.name
    }
  });
});

4️⃣ 后端返回数据格式（重点）

{
  "code": 0,
  "data": [
    {
      "id": 1,
      "name": "总公司",
      "children": [
        {
          "id": 2,
          "name": "技术部"
        }
      ]
    }
  ]
}

⚠️ 字段名必须是：

• id
• name
• children

否则 渲染失败

5️⃣ 选中值 & 回填

click: function (d) {
  $('#deptSelect').val(d.current.name);
  $('#deptId').val(d.current.id);
}

6️⃣ 默认选中

treeSelect.checkNode('deptSelect', 2);

三、方案二（强烈推荐）：xm-select（树形）

👉 更现代、功能更多、维护活跃

1️⃣ 引入 xm-select

<script src="/layui/extends/xm-select.js"></script>

2️⃣ HTML

<div id="deptSelect"></div>

3️⃣ 树形下拉初始化

xmSelect.render({
  el: '#deptSelect',
  name: 'deptId',
  radio: true,      // 单选
  clickClose: true, // 选中即关闭
  tree: {
    show: true,
    expandedKeys: [-1]
  },
  data: [
    {
      name: "总公司",
      value: 1,
      children: [
        { name: "技术部", value: 2 }
      ]
    }
  ]
});

4️⃣ 获取选中值

var value = xmSelect.get('#deptSelect', true);

5️⃣ Ajax 动态加载

xmSelect.render({
  el: '#deptSelect',
  tree: { show: true },
  remoteSearch: true,
  remoteMethod: function(val, cb){
    $.get('/dept/tree', function(res){
      cb(res.data);
    });
  }
});

四、treeSelect vs xm-select 对比

👉 新项目直接用 xm-select

五、常见坑（血泪）

❌ 1. 后端字段不对

"title" → ❌
"text"  → ❌

必须：

"id" + "name" + "children"

❌ 2. 下拉不显示

• input 必须是 layui-input
• 容器不能 display:none

❌ 3. 弹窗里错位

treeSelect.render({
  elem: '#deptSelect',
  height: '300px'
});

❌ 4. 表单提交拿不到值

👉 TreeSelect 只是 UI
必须自己用 hidden input 存 ID

六、典型业务模板（推荐）

<input type="hidden" name="deptId" id="deptId">
<input type="text" id="deptSelect" class="layui-input">

click: function(d){
  $('#deptSelect').val(d.current.name);
  $('#deptId').val(d.current.id);
}

七、选型建议（一句话）

老项目 / 只单选 → treeSelect
新项目 / 多选 / 树复杂 → xm-select

如果你愿意，我可以：

• 🔥 给你封装一个 TreeSelect 通用组件
• 🔥 对接 Spring Boot 后端树接口
• 🔥 解决 LayUI + 弹窗 + 表单回显问题

你现在是 新项目 还是 维护旧系统？