a-tree赋值是子节点，传给后端是子节点加上父节点的解决办法

最近在重构后台管理系统，做到角色管理这边需要给角色分配菜单权限，发现一个小点，场景是这样的：前端用的是antdv框架，里面有一个树状结构a-tree组件，它需要的v-model是子节点的数组，但是不能直接这样传给后端，因为后端需要的是子节点和父节点的数组。所以前端需要将选中的子节点和父节点一起传给后端，赋值的时侯拿到后端的子节点和父节点的数组需要过滤掉父节点将子节点的数组赋值给a-tree的v-model

简单来说，就是前端赋值的时侯将所有的菜单权限数组和后端给的已选中的数组双重循环过滤出我们想要的子节点数组赋值；传值的时侯将我们得到的选中子节点数组以及它们的父节点进行拼接给后端

下面写一下怎么实现的吧

组件部分：

<!--分配权限的弹出框-->
      <a-modal v-model="allotVisible" title="分配权限" @ok="allotOk">
        <a-tree
          v-model="checkedKeys"
          checkable
          :replace-fields="{
            children: 'subMenus',
            key: 'id',
            title: 'menuName',
          }"
          :tree-data="treeData"
          @check="onCheck"
        >
        </a-tree>
      </a-modal>

replace-fields是改变树状结构的字段，因为a-tree默认字段是children，key和title

js部分

export default {
  name: "Role",
  data() {
    return {
      //分配权限弹出框的显示隐藏
      allotVisible: false,
      //分配权限所有的菜单数组
      treeData: [],
      //分配权限的选中的菜单数组(只有子节点)
      checkedKeys: [],
      //分配权限的选中的父Id菜单数组
      parentIdList: [],
      //分配权限的角色id
      roleId: null,
      //判断分配权限有没有勾选过复选框的标识
      flag: false,
      //分配权限选中的原始数据
      originalList: [],
      //分配权限所有的菜单数组的子节点
      childrenList: [],
    };
  },
  methods: {
    /** 分配权限按钮操作 */
    handleAllot(row) {
      //首先重置变量
      this.flag = false;
      this.parentIdList = [];
      this.childrenList = [];
      this.roleId = row.id;
      getChildrenMenu({ parentId: "0" }).then((res) => {
        getRolePermission(row.id).then((result) => {
          //所有的菜单权限数组
	      this.treeData = JSON.parse(JSON.stringify(res.data));
          //已经选中的原始数组（包括子节点和父节点）
          this.originalList = result.data;
          let arr = JSON.parse(JSON.stringify(result.data));
          
          //过滤出只有子节点的数组，也就是childrenList
          let arr1 = this.getTreeChildren(res.data);
          let checkedKeys = [];
          arr.forEach((r) => {
            arr1.forEach((rr) => {
              if (r == rr) {
                checkedKeys.push(r);
              }
            });
          });
          //得到子节点的数组赋值给a-tree的v-model
          this.checkedKeys = checkedKeys;
          this.allotVisible = true;
        });
      });
    },
    //分配权限确定
    allotOk() {
      let arr = [];
      //如果没有触发树形控件的复选框就把原始的数组给后端，如果触发了复选框就将a-tree的v-model拼接父节点的数组传给后端
      if (this.flag) {
        arr = this.checkedKeys.concat(this.parentIdList);
      } else {
        arr = this.originalList;
      }
      allotRolePermission({ roleId: this.roleId, menuIds: arr }).then((res) => {
        this.$message.success("分配成功");
        this.allotVisible = false;
        this.getRoleList();
      });
    },
    //选择树形控件复选框时触发
    onCheck(checkedKeys, e) {
      this.flag = true;
      this.parentIdList = e.halfCheckedKeys;
    },
    //递归数组，得到所有菜单的子节点
    getTreeChildren(data) {
      data.map((item) => {
        if (item.subMenus && item.subMenus.length > 0) {
          this.getTreeChildren(item.subMenus);
        } else {
          this.childrenList.push(item.id);
        }
      });
      return this.childrenList;
    },
  },
  created() {
    this.getRoleList();
  },
};

欢迎留言，看到会回复