采用 layui 树形组件，版本：V2.6.8。只需要更新layui版本，不需要下载tableSelect。
原作者博客：/m0_67402588/article/details/123526860。
从官网更新日志可以看到，树形组件在2.5.7版本还在更新，且2.4.X版本这个功能还未增加，直接下载最新版就不会出现不必要的错误啦。
效果展示：
目录
一、引入css、js
二、js
需要的数据格式示范：
js代码：
三、下拉框回显以及禁用
一、引入css、js
样式部分可以自己调整。
<link rel="stylesheet" type="text/css" href="../../plugins/layui2.6.8/css/layui.css" /><style type="text/css">.layui-form-select dl { padding: 0; }.treeSelect.layui-form-select dl dd:hover{background-color:#fff;}.treeSelect.layui-form-select dl dd, .layui-form-select dl dt{padding-bottom: 10px;}</style><script src="../../plugins/layui2.6.8/layui.js" type="text/javascript" charset="utf-8"></script><div class="layui-form-item"><div class="layui-inline" style="margin-right: 0px;"><label class="layui-form-label"><em class="must">*</em>上级菜单:</label><div class="layui-inline"><div class="layui-unselect layui-form-select treeSelect"><div class="layui-select-title"><span class="layui-input layui-unselect" id="treeclass">选择上级菜单</span><input type="hidden" name="selectID" class="preMenuId"><i class="layui-edge" style="right: 20px;"></i></div><dl class="layui-anim layui-anim-upbit"><dd><ul id="meuntree"></ul></dd></dl></div></div></div></div>
二、js
需要的数据格式示范：
data2 = [{title: '早餐',id: 1,children: [{title: '油条',id: 5},{title: '包子',id: 6},{title: '豆浆',id: 7}]},{title: '午餐',id: 2,checked: true,children: [{title: '藜蒿炒腊肉',id: 8},{title: '西湖醋鱼',id: 9},{title: '小白菜',id: 10},{title: '海带排骨汤',id: 11}]},{title: '晚餐',id: 3,children: [{title: '红烧肉',id: 12,fixed: true},{title: '番茄炒蛋',id: 13}]},{title: '夜宵',id: 4,children: [{title: '小龙虾',id: 14,checked: true},{title: '香辣蟹',id: 15,disabled: true},{title: '烤鱿鱼',id: 16}]}];
js代码：
layui.use(['form', 'layer', 'element', 'tree','util'], function () {var form = layui.form; var layer = layui.layer;var element = layui.element; var tree = layui.tree, util = layui.util;//初始化菜单树，点击某一列赋值显示到input框上ajax.post("/web/user/role/elements", {token: sessionStorage.getItem('token')}, function(res){var treeData = recureFn(res.list);treeData.unshift({id: 0,title: "无上级菜单",children: []})tree.render({elem: "#meuntree",data: treeData,click: function(obj){// layer.msg(JSON.stringify(obj.data));var $select = $(".layui-form-select");$select.removeClass("layui-form-selected").find(".layui-select-title span").html(obj.data.title).end().find("input:hidden[name='selectID']").val(obj.data.id);form.render();}})});//点击显示/隐藏树形下拉框$(".treeSelect").on("click", ".layui-select-title", function (e) {$(this).parents(".treeSelect").toggleClass("layui-form-selected");layui.stope(e); }).on("click", "dl ul span.layui-tree-iconClick", function (e) {layui.stope(e);//阻止事件冒泡，即点击span小图标展开时不触发父级逻辑});//递归处理树形数组function recureFn( arr ){var result = [];arr.map( item=>{ var option = {title: item.menuName,id: item.id,children: recureFn( item.children )}// if( item.children.length!=0 ) delete option.checked; //只给最底层添加checkedresult.push( option );}); return result;}})
三、下拉框回显以及禁用
修改时输入框显示默认值。
//输入框显示var $select = $(".layui-form-select.treeSelect");$select.removeClass("layui-form-selected").find(".layui-select-title span").html(res.data.menuName).end().find("input:hidden[name='selectID']").val(res.data.id);//禁用$(".layui-form-select.treeSelect").off("click"); //解绑click事件 $("#treeclass").addClass("layui-disabled");
