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>
</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("參數不合法，請檢查輸入信息");
        }
      });
    },
  },