1.根据id组合Tree默认选中效果图

 

2.思路遍历id数组，与树数据对比，找到选中id就设置checked为true，受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除，所以我们要处理这种情况，我们可以使用vm.$set()方法，既可以新增属性,又可以触发视图更新。具体看vue文档；

3.看代码

<template>

  <div>

    <Tree :data="data33" show-checkbox multiple ref="tree" class="tree1"></Tree>

  </div>

</template>

<script>

export default {

  data() {

    return {

      data33: [],

      data52: [

        {

          permission: "menu",

          id: "-1",

          title: "菜单设置",

          upperId: "0",

          url: "/menu",

        },

        {

          upperName: "菜单设置",

          permission: "user:userManager",

          id: "1",

          title: "用户管理",

          upperId: "-1",

          url: "/user/userManager",

        },

        {

          upperName: "菜单设置",

          permission: "role:roleManager",

          id: "2",

          title: "权限管理",

          upperId: "-1",

          url: "role/roleManager",

        },

        {

          upperName: "权限管理",

          permission: "role:deleteRole",

          id: "2594c54f1f754bb3ade0c5063f867af7",

          title: "删除权限",

          upperId: "2",

          url: "role/deleteRole",

        },

        {

          upperName: "权限管理",

          permission: "role:roleUpdate",

          id: "2ed0d89673f6447ba22c2441c9509c2f",

          title: "修改权限",

          upperId: "2",

          url: "role/roleUpdate",

        },

        {

          upperName: "权限管理",

          permission: "role:roleAdd",

          id: "b4afdf462f424bf1b9e492a9047df01a",

          title: "新增权限",

          upperId: "2",

          url: "role/roleAdd",

        },

        {

          upperName: "用户管理",

          permission: "user:addUser",

          id: "defejufhefu25642558",

          title: "新增用户",

          upperId: "1",

          url: "user/addUser",

        },

        {

          upperName: "用户管理",

          permission: "user:updateUser",

          id: "dhjdheu1454584deddeww",

          title: "修改用户",

          upperId: "1",

          url: "user/updateUser",

        },

        {

          upperName: "用户管理",

          permission: "user:deleteUser",

          id: "e49faca909ed4baab2b760d4ba077017",

          title: "删除用户",

          upperId: "1",

          url: "user/deleteUser",

        },

      ],

    };

  },

  mounted() {

    let ids = [

      "e49faca909ed4baab2b760d4ba077017",

      "b4afdf462f424bf1b9e492a9047df01a",

    ];

    this.filterDeviceTree(this.data52, ids);

  },

  methods: {

    //初始化数据

    filterDeviceTree(tree, ids) {

      var that = this;

      //这里就是根据id数组显示默认处理

      for (let i = 0; i < this.data52.length; i++) {

        for (let j = 0; j < ids.length; j++) {

          if (this.data52[i].id == ids[j]) {

            that.$set(that.data52[i], "checked", true);

          }

        }

      }

      //将数据转成tree数据

      var data = this.data52;

      data.forEach(function (item) {

        delete item.children;

      });

 

      var map = {};

      data.forEach(function (item) {

        map[item.id] = item;

      });

      var val = [];

      data.forEach(function (item) {

        var parent = map[item.upperId];

 

        if (parent) {

          (parent.children || (parent.children = [])).push(item);

          parent.expand = true;

        } else {

          val.push(item);

        }

      });

      that.data33 = val;

    },

  },

};

</script>

<style scoped>

</style>