layui table 表格折叠自定义（这个思路可以适用所有ta

image.png

列表横向滚动也能自适应根据截图操作，首页有联系方式

第一步： image.png
添加图标并绑定事件
第二步： image.png
使用监听行工具事件拿到obj里面的tr对象
第三步： image.png
根据当前this对象给父级tr加一个统计tr并在当前位置之后

总结

image.png

LoinsInsertAfter(newElement, targetElement) {
        var parent = targetElement.parentNode;
        if (parent.lastChild == targetElement) {
            parent.appendChild(newElement);
        } else {
            parent.insertBefore(newElement, targetElement.nextSibling);
        }
    }
    LoinsContent(event, newNo, $, obj) { // event 当前this指向对象，newNo展示的对象，$,jquery,obj  行监听状态的obj对象
        if ($(event)[0].classList.value.indexOf('layui-icon-plus-square') > -1) {
            $(event)[0].classList.add('layui-icon-minus-square');
            $(event)[0].classList.remove('layui-icon-plus-square');
            var oTest = $(event).parent().parent().parent();
            var newNode = document.createElement("tr");
            newNode.setAttribute('loinsContent', $(obj.tr).attr('data-index'))
                // var reforeNode = $(event).parent().parent().parent();`He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
                // var _html = `<td colspan=${cols.length+1}><div>40614124728974281479247982478924789247902740189247829749827</div></td>`
            newNode.innerHTML = newNo;
            new Utils().LoinsInsertAfter(newNode, oTest[0]);
        } else {
            $(event)[0].classList.add('layui-icon-plus-square');
            $(event)[0].classList.remove('layui-icon-minus-square');
            $(event).parent().parent().parent().parent().find('tr[loinscontent="' + $(obj.tr).attr('data-index') + '"]').remove();
        }
    }

根据实际项目修改，这只是个思路
demo：https://libai-icon.github.io/views/tilAdmin/index.html#/test/contentTable