解决使用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