一个vue element UI 的tree树状处理格式应用

接口数据格式：

效果展示：

具体完整代码： 

<template> 

  <div>

    <el-form label-width="30%">

      <el-row>

        <el-col :span="22">

          <el-form-item label="节点名称">

            <el-cascader

              placeholder="选择菜单名"

              :show-all-levels="false"

              :options="nodeList"

              @change="handleItemChange"

              v-model="valueId"

            ></el-cascader>

          </el-form-item>

        </el-col>

      </el-row>



      <el-row>

        <el-col :span="24">

          <el-form-item>

            <el-button type="primary" @click="newAdd">保存</el-button>

          </el-form-item>

        </el-col>

      </el-row>

    </el-form>

  </div>

</template>



<script>

import { getMenuTreeList } from "@/api/common/menu.js";

import { addCommonToolInfo } from "@/api/common/toolConfiguration";

export default {

  props: {

    staffId: String,

    orgId: String

  },

  watch: {},

  data() {

    return {

      displayNo: "1",

      allIds: "",

      parentNode: {},

      menuList: [{}],

      nodeList: [{}],

      selectedId: "",

      parentId: "",

      valueId: []

    };

  },

  created() {

    getMenuTreeList().then(result => {

      this.nodeList = [];

      this.menuList = result;

      this.getOrgData(this.nodeList, this.menuList);

    });

  },

  methods: {

    newAdd() {

      if (

        this.selectedId != undefined &&

        this.selectedId != null &&

        this.selectedId != ""

      ) {

        let param = {

          allIds: this.allIds, //三级菜单编号

          displayNo: this.displayNo, //显示顺序

          imageUrl: "", //图片地址

          managementNavId: "", //常用工具管辖范围表序号

          nodeId: this.selectedId, //节点编号

          nodeName: "", //节点名称

          nodeUrl: "", //节点地址

          orgId: "", //组织机构

          staffId: this.staffId //工号

        };

        addCommonToolInfo(param).then(res => {

          this.valueId = [];

          this.selectedId = "";

          if (res.code == "0") {

            this.$message({ message: "新增子节点成功", type: "success" });

            this.$emit("handleClose2");

            this.$emit("renderPage");

          } else if (res.code == "1") {

            this.$message({ message: "已存在相同节点", type: "warn" });

          }

        });

      } else {

        this.$message({ message: "子节点信息不能为空", type: "error" });

      }

    },

    // 迭代地域信息

    getOrgData(nodeList, menuList) {

      for (var i = 0; i < menuList.length; i++) {

        nodeList[i] = {};

        nodeList[i].value = menuList[i].value;

        nodeList[i].label = menuList[i].label;

        if (menuList[i].value != "109") {

          if (menuList[i].children.length > 0) {

            nodeList[i].children = [];

            this.getOrgData(nodeList[i].children, menuList[i].children);

          }

        }

      }

      // console.log(nodeList);

    },

    handleItemChange(val) {

      if (val.length > 0) {

        let strIds = val.join(",");

        this.allIds = strIds;

        this.selectedId = val[val.length - 1];

      }

    }

  }

};

</script>

<style scoped>

.el-input__inner {

  width: 20% !important;

}

</style>