element-ui的tree组件的使用

<FormItem
        label="添加权限:"
        prop="checkMenu"
      >
        <el-tree
          :disabled="true"
          ref="mytree"
          :data="branchList"
          show-checkbox
          node-key="id"
          :default-expand-all="true"
          :default-checked-keys="checkMenu"
          :props="defaultProps"
        >
        </el-tree><br></FormItem>

data() {
   return {
     // 权限 开始
     checkMenu: [],
     branchList: [],
     defaultProps: {
       children: "children",
       label: "label",
     },
   };
 },

created() {
  this.getAllRights();
  if (this.pageType != "add") {
    this.detailData();
    this.getHaveRights();
  }
},
methods: {
  // 所有权限
  getAllRights() {
    menuRight1().then((res) => {
      this.branchList = res.data.data;
    });
  },
  detailData() {
    // 编辑默认详情
    detailRole({ id: this.id }).then((res) => {
      let data = res.data;
      if (data.code === 200) {
        this.ruleForm = data.data;
      }
    });
  },
  // 编辑默认权限
  getHaveRights() {
    // 默认权限
    this.checkMenu = [];
    this.rid = this.id;
    this.getAllRights();
    menuRight2({ rid: this.rid }).then((res) => {
      const data1 = res.data.data;
      this.checkMenus = data1;
      // 得到当前角色的权限
      // 得到第三层元素的id
      this.$nextTick(() => {
        data1 && this.getCheckIds(data1);
        this.$refs.mytree.setCheckedKeys(this.checkMenu);
      });
    });
  },
  // 递归得到id
  getCheckIds(arr) {
    arr.map((item, index) => {
      if (item.children.length > 0) {
        this.getCheckIds(item.children);
      } else {
        this.checkMenu.push(item.id);
        return;
      }
    });
  },
  submitForm: function () {
          // 分配权限
          var allcheck = this.$refs.mytree.getCheckedKeys();
          var halfcheck = this.$refs.mytree.getHalfCheckedKeys();
          var newArr = allcheck.concat(halfcheck);
          // 将所有选中的内容以，分隔成为字符串
          var rids = newArr.join(",");
          if (rids === "") {
            this.$message.error("菜单不能为空");
            return false;
          }
          menuRight3({ rid: parseInt(this.id), mids: rids }).then((res) => {
            const data = res.data;
            if (data.code === 200) {
              this.$message.success(data.msg);
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      } else {
        this.$message.error("参数不合法，请检查输入信息");
      }
    });
  },
},