vue+ele树形结构，递归遍历

<template>
  <el-dialog
    title="菜单权限"
    :visible.sync="isShow"
    width="500px"
    :before-close="handleClose"
    :destroy-on-close="true"
  >
    <div>
      <el-tree :data="setTree" show-checkbox node-key="id" :props="defaultProps">
      </el-tree>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
      <el-button :loading="isLoading.changeForm" type="primary" @click="verifyForm"
        >确认</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "roleManageChangeDialog",
  data() {
    return {
      isShow: false,
      form: {},
      setTree: [],
      defaultProps: {
        children: "childs",
        label: "menuName",
      },
      isLoading: {
        changeForm: false,
      },
      uidList: [], //菜单id列表
    };
  },
  created() {},
  methods: {
    handleClose(done) {
      this.$emit("close");
      done();
    },
    // 按钮关闭
    close() {
      this.$emit("close");
      this.isShow = false;
    },
    // 显示
    setShow(item) {
      this.form = {};
      console.log("显示");
      if (item && item.id) {
        this.$set(this.form, "id", item.id);
        /* this.getForm(item,tyep);*/
        this.getTreeData();
        this.getTreeModel();
      }
      this.isShow = true;
    },
    // 获取树形控件数据
    getTreeData() {
      let params = {};
      this.$http
        .request("getAllMenuList", params)
        .then((data) => {
          this.setTree = data.data;
          console.log(this.setTree);
          // 递归及选中、更改菜单id（防止菜单id和按钮id重复）
          this.uidList = [];
          this.disposeTree(this.setTree);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 处理菜单
    // children: "childs", label: "menuName", 【{b}，{}《{}】
    disposeTree(list, isBtns = false) {
      let f = this.uidList; //菜单列表id
      if (!isBtns) {
        // 菜单
        for (let i in list) {
          if (list[i].childs && list[i].childs.length > 0) {
            // 菜单 --并且有子菜单
            list[i].id = "z_" + list[i].id;
            f.push(list[i].id);
            this.disposeTree(list[i].childs, false);
          } else {
            // 菜单 无子菜单
            list[i].id = "z_" + list[i].id;
            f.push(list[i].id);
            if (list[i].btns) {
              let childs = [];
              let btns = list[i].btns;
              console.log(btns);
              for (let j in btns) {
                childs.push({
                  id: btns[j].id,
                  menuName: btns[j].btnName,
                });
              }
              list[i].childs = childs;
            }
          }
        }
      }
      this.$forceUpdate();
    },

    // 获取树形控件选中数据
    getTreeModel() {
      this.modelKey = [];
    },
    // 验证
    verifyForm() {
      this.changePermission();
    },
    //更改权限
    changePermission() {
      let params = {
        roleId: this.form.id,
        // menus:this.$refs.tree.getTree(),
      };
      this.$set(this.isLoading, "changeForm", true);
      this.$http
        .request("roleEditRoleMenu", params)
        .then((data) => {
          this.$set(this.isLoading, "changeForm", false);
          this.$message({
            type: "success",
            message: `更改角色权限成功！`,
          });
          this.isShow = false;
          this.$emit("changeReturn");
          this.$emit("close");
        })
        .catch((err) => {
          this.$set(this.isLoading, "changeForm", false);
        });
    },
    // 修改
    modifyForm() {},
  },
  components: {},
  props: [],
  // 监听
  watch: {},
};
</script>

<style></style>

树形结构图：

数据结构：