elementui table 树形 勾选父节点时勾选全部子节点
开开 2023-03-03 17:37:14 2023-03-03 0 0
需要加以下三个方法
@select="selectChange"@select-all="selectAllChange"@selection-change="selectionChangeHandler"<el-table ref="multiTable" v-loading="crud.loading" lazy :load="getMenus" :data="list" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="id" @select="selectChange" @select-all="selectAllChange" @selection-change="selectionChangeHandler" >
/** * 用于树形表格多选,单选的封装 * @param selection * @param row */ selectChange(selection, row) { // 如果selection中存在row代表是选中,否则是取消选中 if (selection.find(val => { return this.getDataId(val) === this.getDataId(row) })) { if (row.children) {//注意这里的children是后台返回数据的children字段 row.children.forEach(val => { this.$refs.multiTable.toggleRowSelection(val, true) selection.push(val) if (val.children) { this.selectChange(selection, val) } }) } } else { this.toggleRowSelection(selection, row) } }, /** * 用于树形表格多选, 选中所有 * @param selection */ selectAllChange(selection) { // 如果选中的数目与请求到的数目相同就选中子节点,否则就清空选中 if (selection && selection.length === this.list.length) { selection.forEach(val => { this.selectChange(selection, val) }) } else { this.$refs.multiTable.clearSelection() } }, // 选择改变 selectionChangeHandler(val) { this.selections = val this.unique(this.selections,'id')//这里有一个问题就是这样点选完之后,数据有重复,所以根据id手动去重,期待优化 }, /** * 切换选中状态 * @param selection * @param data */ toggleRowSelection(selection, data) { if (data.children) {//注意这里的children也是后台返回数据的children字段 data.children.forEach(val => { this.$refs.multiTable.toggleRowSelection(val, false) if (val.children) { this.toggleRowSelection(selection, val) } }) } }, getDataId(data) { return data['id'] }, //数组去重 unique(arr,i){ for(let i=0;i<arr.length;i++){ for(let j=i+1;j<arr.length;j++){ if(arr[i].id == arr[j].id){ arr.splice(j,1) j-- } } } }, //列表树懒加载 getMenus(tree, treeNode, resolve) { const params = { pid: tree.id } setTimeout(() => { crudMenu.getMenus(params).then(res => { resolve(res.content) }) }, 100) },