layui树形穿梭框

Layui没有原生提供树形穿梭框的组件，但是你可以结合 Layui 的树形菜单和穿梭框组件来实现类似的功能。

首先，你可以使用 Layui 的树形菜单组件构建树形结构。通过调用 `tree.render` 方法，你可以将数据渲染成树形菜单。例如：

var treeData = [
  {
    title: '节点1',
    id: 1,
    children: [
      {
        title: '子节点1',
        id: 11
      },
      {
        title: '子节点2',
        id: 12
      }
    ]
  },
  {
    title: '节点2',
    id: 2,
    children: [
      {
        title: '子节点3',
        id: 13
      },
      {
        title: '子节点4',
        id: 14
      }
    ]
  }
];

layui.tree({
  elem: '#treeContainer',
  data: treeData,
  click: function(node) {
    // 树形菜单节点点击事件
    console.log(node); // 输出点击的节点数据
  }
});

接下来，你可以使用 Layui 的穿梭框组件构建穿梭框。通过调用 `transfer.render` 方法，你可以将数据渲染成穿梭框。例如：

var transferData = [
  {
    value: 1,
    title: '节点1'
  },
  {
    value: 2,
    title: '节点2'
  },
  {
    value: 3,
    title: '节点3'
  },
  {
    value: 4,
    title: '节点4'
  }
];

layui.transfer({
  elem: '#transferContainer',
  data: transferData,
  id: 'transfer', // 必须指定唯一的 ID
  title: ['可选项', '已选项'], // 设置穿梭框的标题
  showSearch: true, // 显示搜索框
  width: 'auto', // 设置宽度
  height: 'auto', // 设置高度
  text: {
    none: '无数据', // 没有数据时的提示文本
    searchNone: '无匹配数据' // 搜索无匹配数据时的提示文本
  }
});

最后，你可以监听树形菜单的点击事件，在事件处理函数中获取点击的节点数据，并将节点数据添加到穿梭框中。例如：

layui.tree({
  elem: '#treeContainer',
  data: treeData,
  click: function(node) {
    // 树形菜单节点点击事件
    layui.transferAdd('transfer', [node]); // 将点击的节点添加到穿梭框中
  }
});

这样，你就可以实现类似于树形穿梭框的效果了。记得在 HTML 中添加对应的容器元素，如 `<div id="treeContainer"></div>` 和 `<div id="transferContainer"></div>`。

希望这些信息对你有帮助！如有更多问题，请继续提问。