解決使用element-ui的el-table組件顯示樹形數據時,多選框全選無法選中全部節點問題


表格的數據像這樣: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)
        }
    })
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM