涉及到树的操作最好转化成扁平的数据格式进行处理(处理参考链接),如果没有处理成扁平数据的格式的话,可以参考以下内容(内容基于vxe-table组件):
1.删除树的节点后更新树的显示
//批量删除菜单
handleRemoveRow(row, rowIndex, $rowIndex) {
this.$confirm('请选择是否删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
let that = this;
let oids = [row.oid];
var callback = res => {
let pRows = [row];
function findTree(rowTemp) {
if (rowTemp.poid && rowTemp.poid != '0') {
let pRow = that.$refs.xTree.getRowById(rowTemp.poid);
pRows.unshift(pRow);
findTree(pRow);
}
}
findTree(row);
let index = 0;
function deal(arr) {
arr.forEach((obj, index2) => {
if (obj.oid === pRows[index].oid) {
if (index + 1 === pRows.length) {
arr.splice(index2, 1);
} else {
index++;
deal(obj.subMenuList);
}
}
});
}
deal(this.tableData);
};
this.$commondPdmapisRequest(
'$api',
'pdmapis',
'menu',
'batchDeleteSystemMenu',
{param: oids},
callback,
null,
'删除菜单成功!'
);
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
2.编辑树的节点后更新树的显示
//确认编辑菜单
handleSubmitUpdateMenu() {
this.$refs['menuForm'].validate(valid => {
if (valid) {
let params = {
param: this.systemMenuData
};
var callback = res => {
this.systemMenuDrawer = false;
Object.keys(this.currentRow).forEach(ele => {
Object.keys(this.systemMenuData).forEach(key => {
if (ele == key) {
this.$set(this.currentRow, ele, this.systemMenuData[key]);
}
});
});
};
this.$commondPdmapisRequest(
'$api',
'pdmapis',
'menu',
'updateSystemMenu',
params,
callback,
null,
'修改菜单成功!'
);
}
});
},
3.菜单下移后更新树的显示
//菜单下移
handleMoveDownRow(row, rowIndex, $rowIndex) {
let pRow;
let exchangeData;
if (rowIndex == -1) {
//获取父级
pRow = this.$refs.xTree.getRowById(row.poid);
exchangeData = pRow.subMenuList[$rowIndex + 1];
if (pRow.subMenuList.length == $rowIndex + 1) {
return this.$message.warning('已经是最后一个了');
}
} else {
//取当前层级
exchangeData = this.tableData[rowIndex + 1];
if (this.tableData.length == rowIndex + 1) {
return this.$message.warning('已经是最后一个了');
}
}
let copyChangeData;
let params = {
param: {
srcMenu: {
oid: row.oid,
otype: row.otype
},
tarMenu: {
oid: exchangeData.oid,
otype: exchangeData.otype
}
}
};
var callback = res => {
if (rowIndex == -1) {
copyChangeData = pRow.subMenuList[$rowIndex + 1];
this.$set(pRow.subMenuList, $rowIndex + 1, row);
this.$set(pRow.subMenuList, $rowIndex, copyChangeData);
} else {
//取当前层级
copyChangeData = this.tableData[rowIndex + 1];
this.$set(this.tableData, rowIndex + 1, row);
this.$set(this.tableData, rowIndex, copyChangeData);
}
};
this.$commondPdmapisRequest('$api', 'pdmapis', 'menu', 'moveSystemMenu', params, callback, null, '下移成功');
},
4.菜单上移后更新树的显示
//菜单上移
handleMoveUpRow(row, rowIndex, $rowIndex) {
let pRow;
let exchangeData;
if (rowIndex == -1) {
//获取父级
pRow = this.$refs.xTree.getRowById(row.poid);
exchangeData = pRow.subMenuList[$rowIndex - 1];
} else {
//取当前层级
exchangeData = this.tableData[rowIndex - 1];
}
let copyChangeData;
if (!$rowIndex) {
return this.$message.warning('已经是第一个了');
} else {
let params = {
param: {
srcMenu: {
oid: row.oid,
otype: row.otype
},
tarMenu: {
oid: exchangeData.oid,
otype: exchangeData.otype
}
}
};
var callback = res => {
if (rowIndex == -1) {
copyChangeData = pRow.subMenuList[$rowIndex - 1];
this.$set(pRow.subMenuList, $rowIndex - 1, row);
this.$set(pRow.subMenuList, $rowIndex, copyChangeData);
} else {
//取当前层级
copyChangeData = this.tableData[rowIndex - 1];
this.$set(this.tableData, rowIndex - 1, row);
this.$set(this.tableData, rowIndex, copyChangeData);
}
};
this.$commondPdmapisRequest('$api', 'pdmapis', 'menu', 'moveSystemMenu', params, callback, null, '上移成功');
}
},