树的删除和修改以及上下移动(不调用刷新树的接口)

涉及到树的操作最好转化成扁平的数据格式进行处理(处理参考链接),如果没有处理成扁平数据的格式的话,可以参考以下内容(内容基于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, '上移成功');
      }
    },