先來看看最終效果： 如圖中所示，這裡用到了無限級的類目（tree實現）和產品狀態（select實現）。 其中，無限級tree是使用了這哥們的辦法： layui實現下拉分類多級 https://www.cnblogs.com/matengfei123/p/9444095.html 他在文章最後提到“v ...
先來看看最終效果：
如圖中所示，這裡用到了無限級的類目（tree實現）和產品狀態（select實現）。
其中，無限級tree是使用了這哥們的辦法：
layui實現下拉分類多級 https://www.cnblogs.com/matengfei123/p/9444095.html
他在文章最後提到“vue和layui的form表單衝突,去除layui的form即可”，當時就想，他vue和我純layui何關，先用上再說！
於是，悲劇了...
加上tree，select用不了；不加，tree用不了；似乎，tree依賴form，但是又和form里的select衝突！
網上搜了很久，也找不到現成的解決辦法；沒轍，自己動手，豐衣足食，頭鐵就是乾！
先看看代碼：
1 <div class="layui-inline"> 2 <label class="layui-form-label">產品類目：</label> 3 <div class="layui-input-inline"> 4 <div class="layui-unselect layui-form-select downpanel"> 5 <div class="layui-select-title"> 6 <span class="layui-input layui-unselect" id="treeclass">請選擇</span> 7 <input type="hidden" name="category" id="category" value="0"> 8 <i class="layui-edge"></i> 9 </div> 10 <dl class="layui-anim layui-anim-upbit"> 11 <dd> 12 <ul id="classtree"></ul> 13 </dd> 14 </dl> 15 </div> 16 </div> 17 </div>
1 <div class="layui-inline"> 2 <label class="layui-form-label">產品狀態：</label> 3 <div class="layui-input-inline"> 4 <select name="avtiveState" id="avtiveState" lay-filter="avtiveState"> 5 <option value="0">請選擇</option> 6 <option value="2">銷售中</option> 7 <option value="3">停止銷售</option> 8 <option value="1">已下架</option> 9 </select> 10 </div> 11 </div>
1 layui.use('form', function () { 2 var $ = layui.jquery, form = layui.form; 3 form.on('select(supplier)', function (data) { 4 $("#supplier").val(data.value);//選中時，更改原生select的值 5 }); 6 form.on('select(avtiveState)', function (data) { 7 $("#avtiveState").val(data.value); 8 }); 9 });
1 //引用自https://www.cnblogs.com/matengfei123/p/9444095.html 2 layui.use('tree', function () { 3 var $ = layui.jquery, tree = layui.tree, form = layui.form; 4 var trees = [{ name: "請選擇", id: 0 }]; 5 Array.prototype.push.apply(trees, JSON.parse($("#hidTree").val())); 6 tree({ 7 elem: "#classtree", 8 skin: "no-icon", 9 nodes: trees, 10 click: function (node) { 11 var $select = $($(this)[0].elem).parents(".layui-form-select"); 12 $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='category']").val(node.id); 13 } 14 }); 15 $(".downpanel").on("click", ".layui-select-title", function (e) { 16 $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected"); 17 $(this).parents(".downpanel").toggleClass("layui-form-selected"); 18 layui.stope(e); 19 }).on("click", "dl i", function (e) { 20 layui.stope(e); 21 }); 22 $(document).on("click", function (e) { 23 $(".layui-form-select").removeClass("layui-form-selected"); 24 }); 25 });
通過簡單查看原因，感覺能解決，而且應該不難，於是有了下麵這段代碼：
1 layui.use('form', function () { 2 var $ = layui.jquery, form = layui.form; 3 //衝突，這段沒作用 4 //form.on('select(supplier)', function (data) { 5 // $("#supplier").val(data.value); 6 //}); 7 //form.on('select(avtiveState)', function (data) { 8 // $("#avtiveState").val(data.value); 9 //}); 10 $("#supplier,#avtiveState").parent().on("click", ".layui-form-select", function () { 11 var ths = $(this); 12 setTimeout(function () { 13 ths.addClass("layui-form-selected"); 14 }, 100);//必須timeout延遲，不然會被框架覆蓋賦值 15 }); 16 $("#supplier,#avtiveState").parent().on("mouseup",".layui-form-select", function () { 17 var ths = $(this); 18 setTimeout(function () { 19 ths.prev().val(ths.find("dl dd.layui-this").attr("lay-value")); 20 }, 100);//必須timeout延遲，layui.select是非同步賦值 21 }); 22 });
解決！頁面上所有功能能用無誤！
（因為我這裡是列表頁，使用得比較淺，預估詳情頁上要使用tree，將會和form發生更難解決的衝突，不建議繼續用tree，不過也請求解決了這個問題的大佬發一發隨筆，幫幫大家！）
-------------------------
感謝博客園給我通過了開通博客申請！
我開通博客主要是為了記錄開發中遇到的問題與解決辦法，這篇衝突問題今日遇到了，便馬不停蹄來發了第一個隨筆。
以後，還請大家多多關照！
