表格的數據像這樣:projectEntryDtoList 字段中的數據為子級列表數據
關於 el-table 組件實現樹形數據這里不再過多贅述,文檔在這里:https://element.eleme.cn/#/zh-CN/component/table
首先設定一個全局變量 isSelectAll 表明是否為全選;
為表格綁定點擊全選時觸發的方法 @select-all="handleSelectAll",同時給表格綁定ref,來獲取組件實例 ref="projectEntryList";
handleSelectAll() { this.isSelectAll = !this.isSelectAll this.changeSelectStatus(this.projectEntryList, this.isSelectAll) }
對表格數據進行遞歸遍歷,通過 toggleRowSelection 方法來對每一條數據進行操作
changeSelectStatus(data, selected) { data.forEach(row => { this.$refs.projectEntryList.toggleRowSelection(row, selected) if (row.projectEntryDtoList) { this.changeSelectStatus(row.projectEntryDtoList, selected) } }) }