layui和vue父子级页面及操作

最近在老项目里面添加一些页面，项目太老只能在原有的项目基础和插件上添加代码

html

html 复制代码

//表格        
<table id="dataTable">
   <thead>
      <tr><th>序号</th><th>名称</th><th></th></tr>
   </thead>
   <tbody></tbody>
</table>
<div id="pagination"></div>//layui分页

javascript 复制代码

<script>
    function toggleChildRow(rowId) {
        console.log(rowId,'rowId')
        var childRow = document.querySelector('.child-row[data-parent-id="'+rowId+'"]');
        var btn = document.querySelector('.toggle-btn[data-row="'+rowId+'"]');
        if(childRow.style.display === 'none') {
            childRow.style.display = 'table-row';
            btn.textContent = '▶';//展开
        } else {
            childRow.style.display = 'none';
            btn.textContent = '▼';//折叠
        }
    }
   function viewChildRow(row){//查看操作
        vue.rptCoProfileAccountList = []
        vue.rptCoProfileAccountList.push(row)
        vue.tlttt = '查看'
    }
  var vue = new Vue({//使用vue
        el: '#vue',
        data: {
           },
        computed: {

        },
        created(){
            this.getlist()//列表接口
        },
        methods: {
             getlist:function (){
                layui.table.render({
                    elem: '#pagination'//分页id
                    , url:'/api/rptCoProAccount/list'
                    , totalRow: true
                    ,id:'idTest'
                    , cols: []
                    , page: true
                    ,done: function(res, curr, count) {
                        vue.getsylist(res.data)//数据进行渲染
                    }
                });
            },
            getsylist:function(mockData){//数据渲染到页面
                var tbody = document.querySelector('#dataTable tbody');
                tbody.innerHTML = '';

                mockData.forEach((item,index) => {//数据循环
                    var parentRow = document.createElement('tr');
                    parentRow.className = 'parent-row';
                    parentRow.dataset.id = item.orgId;

                    var toggleCell = document.createElement('td');
                    toggleCell.innerHTML = '<button class="toggle-btn" data-                          row="'+item.orgId+'" onclick="toggleChildRow(\''+item.orgId+'\')">▼</button>';//展开按钮

                    var idCell = document.createElement('td');
                    idCell.textContent = index + 1;//序号

                    var nameCell = document.createElement('td');
                    nameCell.textContent = item.orgName;//名称

                    parentRow.append(idCell, nameCell, toggleCell);
                    tbody.appendChild(parentRow);
                      //子数据
                    if(item.children && item.children.length > 0) {
                        var childRow = document.createElement('tr');
                        childRow.className = 'child-row';
                        childRow.dataset.parentId = item.orgId;
                        childRow.style.display = 'none';

                        var containerCell = document.createElement('td');
                        containerCell.colSpan = 4;

                        var childTable = document.createElement('table');
                        childTable.className = 'child-table';

                        var thead = document.createElement('thead');
                        thead.innerHTML = '<tr><th>名称</th><th>开户行</th><th>开户行账号</th><th>操作</th></tr>';

                        var childTbody = document.createElement('tbody');
                        item.children.forEach(function(child) {
                            var row = document.createElement('tr');
                            row.innerHTML = '' +
                                '<td>' + child.accountName + '</td>' +
                                '<td>' + child.openingBank + '</td>'+
                                '<td>' + child.accountNum + '</td>'+
                                '<td> <a class="layui-btn layui-btn-xs" onclick="viewChildRow('+JSON.stringify(child).replace(/"/g, '&quot;')+')" lay-event="resetPwd">\n' +
                                '                <img src="../../../../assets/img/look.png" alt=""/>\n' +
                                '                <span>查看</span>\n' +
                                '            </a>\n' +
                                '            <a class="layui-btn layui-btn-xs" onclick="editChildRow('+JSON.stringify(child).replace(/"/g, '&quot;')+')" lay-event="edit">\n' +
                                '                <img src="../../../../assets/img/edit.png" alt=""/>\n' +
                                '                <span>修改</span>\n' +
                                '            </a>\n' +
                                '            <a class="layui-btn layui-btn-xs" onclick="scChildRow('+JSON.stringify(child).replace(/"/g, '&quot;')+')" lay-event="del">\n' +
                                '                <img src="../../../../assets/img/delete.png" alt="">\n' +
                                '                <span>删除</span>\n' +
                                '            </a></td>'
                            ;
                            childTbody.appendChild(row);
                        });

                        childTable.append(thead, childTbody);
                        containerCell.appendChild(childTable);
                        childRow.appendChild(containerCell);
                        tbody.appendChild(childRow);
                    }
                });
            },
        }
  })
</script>