vue + el-tree 实现角色分配权限功能

HTML部分

<template>
  <div class="permissions-wrapper">
    <!-- :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]" -->
    <el-tree
      ref="permissionsTree"
      v-loading="loadingTree"
      :data="permissionsData" //树形控件绑定数据
      show-checkbox
      node-key="id"
      :props="{
        children: 'childList',
        label: 'name', //树形控件需要显示的后台字段
      }"
      @check="handleChange"
      :default-checked-keys="checked" //checked:[] Array
    >
    </el-tree>
    <div class="buttom-wrap">
      <el-button type="primary" size="small" @click="handleSubmit"
      >提交
      </el-button>
    </div>
  </div>
</template>

    //handleChange事件方法
    handleChange(item, check) { 
      this.checkList = check.checkedKeys
    },

//数据提交
    handleSubmit() {
      this.$http.post("后台接口", 接口参数).then((res) => {
        if (res.data.code == 200) {
          this.permissionsData = res.data.data;
          this.$emit("updataNews", false);
          this.$message.success("权限分配成功");
          this.$forceUpdate()
          // window.location.reload();
        } else {
          this.$message.error(res.data.msg)
        }
      });
    },

//数据提交后回显
    fetchPermissionsList(id) {
      this.loadingTree = true;
      this.checked = [];
      this.roleId = id;
      this.$http.get("后台接口" + 接口所需参数).then((res) => {
        if (res.data.code == 200) {
          this.permissionsData = res.data.data;
          this.permissionsData.forEach(elem => {
            if (elem.isCheck == "0") {
              this.checked.push(elem.id)
            }
          })

          this.loadingTree = false;
        } else {
          this.$message.error(res.data.msg);
          this.loadingTree = false;
        }
      });
    },

完。。。。。。。。。。。。。。。。。。。