表格的数据像这样: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) } }) }