layui和vue父子級頁面及操作

最近在老項目里面添加一些頁面,項目太老只能在原有的項目基礎和插件上添加代碼

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, '&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>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/85181.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/85181.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/85181.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Houdini 節點使用方法

Houdini 的節點系統是其程序化建模和特效制作的核心功能之一&#xff0c;通過節點網絡實現程序化建模、特效制作、動力學模擬等復雜任務。掌握節點使用方法是高效創作的關鍵&#xff0c;以下是圍繞用戶需求的 全面、深入且結構化 的節點使用指南 一、節點基礎操作 1. 創建與連…

license授權文件說明

license管理 1.使用場景 系統將自動檢測license信息是否過期 - license過去前一個月&#xff0c;會顯示warning&#xff1a;license file will expire in 30 days - 當license過去&#xff0c;會顯示license file expired#注意 1. 數據庫重啟時才會啟動 License 授權期限校驗…

C++11中alignof和alignas的入門到精通指南

文章目錄 一、引言二、內存對齊的概念和作用2.1 什么是內存對齊2.2 內存對齊的優勢 三、alignof運算符3.1 定義和作用3.2 語法規則3.3 使用示例3.4 注意事項 四、alignas說明符4.1 定義和作用4.2 語法規則4.3 使用示例4.4 注意事項 五、alignof和alignas的結合使用六、實際應用…

防爆+高性能!ABB 防爆伺服電機HY系列守護安全生產

在石油、化工、火工等高風險行業中&#xff0c;如何在易燃易爆環境中確保設備安全穩定運行&#xff0c;同時兼顧高性能&#xff1f;ABB防爆伺服電機HY系列給出了完美答案&#xff01; 專為爆炸性環境設計&#xff0c;安全與性能兼得 ABB HY系列基于先進的HDS伺服平臺打造&…

洪千武—華為海外HRBP

我的個人介紹 辰熙咨詢創始人&CEO 2005年入職華為人力資源管理部 華為海外首批HRBP推動者、華為TUP股權激勵實戰顧問 華為IBM項目組成員、華為海外代表處AT成員 著有《OKR管理法則》、《力出一孔》 2005年以HR英文專才&#xff0c;從香港著名咨詢公司被獵聘到華為人力…

測試:網絡協議超級詳解

??親愛的技術愛好者們,熱烈歡迎來到 Kant2048 的博客!我是 Thomas Kant,很開心能在CSDN上與你們相遇~?? 本博客的精華專欄: 【自動化測試】 【測試經驗】 【人工智能】 【Python】 </

游戲技能編輯器界面優化設計

界面布局重構 詳細界面布局 ---------------------------------------------------------- | 頂部工具欄 [保存] [加載] [撤銷] [重做] [測試] [設置] | --------------------------------------------------------- | 資源管理 | | 屬性編…

【java中使用stream處理list數據提取其中的某個字段,并由List<String>轉為List<Long>】

你當前的代碼是這樣的&#xff1a; List<String> gongkuangIds gongkuangBoundList.stream().filter(obj -> obj.getBoundValue() ! null).map(PlanSchemeProductionBoundInfo::getBoundValue).distinct().collect(Collectors.toList());這段代碼從 gongkuangBoundL…

《前端面試題:JS數組去重》

JavaScript數組去重終極指南&#xff1a;從基礎到高級的多種方法&#xff08;附面試題解析&#xff09; 在前端開發中&#xff0c;數組去重是JavaScript中最常見的需求之一。本文將全面解析8種數組去重方法&#xff0c;包括基礎實現、ES6新特性、性能優化等&#xff0c;并附上…

基于51單片機的智能小車:按鍵調速、障礙跟蹤、紅外循跡與數碼管顯示(一個合格的單片機課設)

引言 在嵌入式系統領域&#xff0c;51單片機因其簡單易用、成本低廉的特點&#xff0c;一直是入門學習的理想平臺。今天我將分享一個基于51單片機的多功能智能小車項目&#xff0c;它集成了按鍵PWM調速、障礙物跟蹤、紅外循跡和數碼管顯示四大功能。這個項目不僅涵蓋了嵌入式開…

Java異常處理(try-catch-finally):像醫生一樣處理程序的“感冒”

&#x1f525;「炎碼工坊」技術彈藥已裝填&#xff01; 點擊關注 → 解鎖工業級干貨【工具實測|項目避坑|源碼燃燒指南】 一、從一個真實問題開始&#xff1a;為什么需要異常處理&#xff1f; 假設你正在開發一個文件讀取工具&#xff0c;用戶輸入文件名后&#xff0c;程序會讀…

PostgreSQL 數據庫故障與性能高效實時監測技術深度解析

關鍵詞&#xff1a; postgresql 故障與性能監控 &#x1f4d1; 文章目錄 1. 引言與監控重要性 2. PostgreSQL監控體系架構 3. 故障監控核心技術 4. 性能監控關鍵指標 5. 實時監測技術實現 6. 監控工具選型與部署 7. 故障預警與自動化響應 8. 性能調優監控策略 9. 最佳…

logrotate 踩坑

我的logrotate配置&#xff0c;原本運行正常&#xff0c;最近幾天發現輪轉失敗&#xff0c;兩個目錄下的日志全部無法輪轉&#xff0c;于是開始排查問題 /data01/logs/test1/*.log /data01/logs/test2/*.log {missingokrotate 1notifemptycreate 0644 www-data admsharedscrip…

FastGPT、百度智能體、Coze與MaxKB四大智能體平臺在政務場景下的深度對比

在生成式AI技術快速迭代的浪潮中&#xff0c;百度智能體平臺、Coze、FastGPT和MaxKB作為四大智能體開發平臺&#xff0c;憑借差異化的技術路徑和功能特性&#xff0c;正在重塑政務AI應用的開發范式。本文從功能實現、政務場景適應性等維度展開深度解析&#xff0c;為開發者提供…

基于SpringBoot的美食分享平臺-038

一、項目技術棧 Java開發工具&#xff1a;JDK1.8 后端框架&#xff1a;SpringBoot 前端&#xff1a;采用HTML和Vue相結合開發 數據庫&#xff1a;MySQL5.7和Navicat管理工具結合 服務器&#xff1a;Tomcat8.5 開發軟件&#xff1a;IDEA / Eclipse 是否Maven項目&#xff1a;是 …

【C++第三方包安裝】Windows與Linux安裝配置redis-plus-plus指南

前言 下面主要是對于兩種環境安裝、配置、使用C的第三方包&#xff08;redis&#xff09;&#xff0c;對于其他的第三方庫&#xff0c;也可以使用類似的方法進行類比安裝。 且大多數的第三方庫都可以利用工具一鍵安裝或手動編譯安裝。 Windows 要在Windows系統上快速安裝和使…

springboot入門之路(二)

系列文章目錄 springboot入門之路&#xff08;一&#xff09;連續的學習漸進之路。閱讀點擊&#xff1a;springboot入門之路(一) 文章目錄 系列文章目錄3.springboot配置及注意事項3.1繼承starter parent3.2使用沒有父POM的Spring Boot3.3配置java的編譯的版本3.4使用"de…

【開源解析】基于Python+Qt打造智能應用時長統計工具 - 你的數字生活分析師

&#x1f4ca; 【開源解析】基于PythonQt打造智能應用時長統計工具 - 你的數字生活分析師 &#x1f308; 個人主頁&#xff1a;創客白澤 - CSDN博客 &#x1f525; 系列專欄&#xff1a;&#x1f40d;《Python開源項目實戰》 &#x1f4a1; 熱愛不止于代碼&#xff0c;熱情源自…

PHP語法基礎篇(三):類型轉換與常量

"在完成PHP輸出函數和字符串操作的學習后&#xff0c;本篇筆記將記錄 類型轉換和 常量應用的學習過程。作為語法基礎篇的第三部分&#xff0c;將重點關注&#xff1a; 類型轉換數學函數常量定義&#xff1a;define() 與const 的使用差異魔術常量應用&#xff1a;__LINE__ …

Linux lsof 命令詳解+實例

&#x1f468;?&#x1f393;博主簡介 &#x1f3c5;CSDN博客專家 ??&#x1f3c5;云計算領域優質創作者 ??&#x1f3c5;華為云開發者社區專家博主 ??&#x1f3c5;阿里云開發者社區專家博主 &#x1f48a;交流社區&#xff1a;運維交流社區 歡迎大家的加入&#xff01…