解决使用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)
        }
    })
}
原文地址:https://www.cnblogs.com/yejunm3/p/15090242.html