最近在老项目里面添加一些页面,项目太老只能在原有的项目基础和插件上添加代码
html
//表格
<table id="dataTable"><thead><tr><th>序号</th><th>名称</th><th></th></tr></thead><tbody></tbody>
</table>
<div id="pagination"></div>//layui分页
js
<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({//使用vueel: '#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, '"')+')" 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, '"')+')" 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, '"')+')" 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>