ant design vue 的 a-tree父节点半选的提交及反显问题

憨憨0011

已于 2024-04-10 20:25:24 修改

阅读量529

点赞数 3

文章标签： vue.js javascript 前端

于 2024-04-09 19:48:11 首次发布

本文链接：https://blog.csdn.net/weixin_44309161/article/details/137564810

版权

文章讲述了在使用Vue的A-Tree组件实现多级权限选择时，如何处理反显和提交时的逻辑，包括处理checkedKeys的变化、半选节点、历史选择记录，以及如何通过遍历获取叶子节点和比较数组元素来实现正确功能。

摘要由CSDN通过智能技术生成

a-tree的@check="onCheck"

onCheck(checkedKeys, e) {
  console.log("onCheck", checkedKeys);
  console.log("halfCheckedKeys",e.halfCheckedKeys)
  this.checkedKeysIsChange=true;//点击选中，checkedKeys已恢复正常
  this.checkedKeys = checkedKeys;//选择部分
  this.halfCheckedKeys=e.halfCheckedKeys;//半选部分
},

data(){}

checkedKeys: [],
halfCheckedKeys:[],//半选父节点
selectedKeys: [],
treeData: null,
leafData:[],//叶子节点
historyCheckedKeys:[],//历史选择节点
checkedKeysIsChange:false,//回显之后，是否有点击变更选中节点(由于反显是通过叶子节点的key列表来反显的，此时checkedKeys不包含父节点（表面选中）,只有触发onCheck才会恢复正常，所以当checkedKeysIsChange为false时，应该提交历史缓存数据)

提交时

//由于反显是通过叶子节点的key列表来反显的，此时checkedKeys不包含父节点（表面选中）,
//只有触发onCheck才会恢复正常，所以当checkedKeysIsChange为false时，应该提交历史缓存数据historyCheckedKeys
if(this.checkedKeysIsChange){
    this.form.authorityIds = this.checkedKeys.concat(this.halfCheckedKeys).join(",");
}else{
    this.form.authorityIds = this.historyCheckedKeys.join(",");
}

反显时,只需要选中tree节点最深层的叶子节点即可反显成功，但是有个问题此时如果再提交，也只是提交这一些叶子节点的key，除非再触发一次oncheck，就能够恢复正常，所以这里我的解决方案时，保留一份历史选择key，当没有触发oncheck时，提交历史选择的key。

//从完整的treeData遍历出最深层的节点（所有子节点及没有子节点的节点）
    getLeafList(data){
     data.map((item) => {
     if (item.children && item.children.length > 0) {
           this.getLeafList(item.children);
        } else {
            //leafData数组存放  
            this.leafData.push(item.key);
        }
      });
    },
    //获取两个数组中的公共元素
    findCommonElements(arr1, arr2) {
      return arr1.filter(item => arr2.includes(item));
    }

    init() {
      this.checkedKeys = [];
	    this.leafData=[];
      getMgmAuthorityTree({
        roleId: this.form.roleId
      }).then(res => {
        this.treeData = res.data.data;
        //获取叶子节点
        this.getLeafList(res.data.data);
        //反显
        getProjectAuthorityByRole({
          roleId: this.form.roleId,
          projectId: this.projectId
        }).then(res => {
          //由于反显是通过叶子节点的key列表来反显的，此时checkedKeys不包含父节点（表面选中）,
          //只有触发onCheck才会恢复正常，所以需要记录历史缓存数据 historyCheckedKeys
          this.checkedKeysIsChange=false;
          this.historyCheckedKeys=res.data.data;
          this.checkedKeys = this.findCommonElements(res.data.data,this.leafData)
        });
      });
    },

          <a-tree
            v-model="checkedKeys"
            checkable
            :expanded-keys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :selected-keys="selectedKeys"
            :tree-data="treeData"
            @expand="onExpand"
            @select="onSelect"
            @check="onCheck"
          />