element tree获取半选id和全选id 和回显半选id加全选id

// heml el-tree 需要配置node-key




// 获取半选和全选 
// 获取所有的复选框已经勾选的id
getAllCheckedKeys(list) {
 const defaultCheckedKeys = [];
 // 获取ref
 const treeDataRef = this.$refs.treeData;
 // 返回半选和全选的数据
 // getCheckedNodes:全选的集合,getHalfCheckedNodes半选的集合
 const treeDataList = [...treeDataRef.getCheckedNodes(), ...treeDataRef.getHalfCheckedNodes()];
 return defaultCheckedKeys;
},

// 对半选和全选的进行反选
async initCheckoutTree() {
  // 初始化需要等dom元素加载完毕以后在进行获取ref
  await this.$nextTick();
  // defaultCheckedKeys:后端返回的选中id [1,3,4,56,7,8,9,223]
  const treeDataRef = this.$refs.treeData;
  for (const key of this.defaultCheckedKeys) {
  	// getNode(获取tree中对应的节点)
    const node = treeDataRef.getNode(key);
    // isLeaf(判断节点是否为叶子节点)
    // 如果存在isLeaf 代表是叶子节点为最后一级那么就选中即可 不是则不选择
    if (node?.isLeaf) {
      // setChecked (设置tree中对应的节点为选中状态)
      treeDataRef.setChecked(node, true);
    }
  }
},


你可能感兴趣的:(element,前端,javascript,vue.js,elementui)