树形控件选择时父关联子,子不关联父的实现

elementui的树形控件有个check-strictly属性(在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false),也许是太过智能了
有如下现象及问题:
1、当你通过函数设置勾选节点的时候,只要父节点被勾选子节点必会勾选上,即便设置勾选的list中无此子节点。
2、当你点击勾选复选框时候,若点击父节点,其下子节点全部统一跟随父节点变化;若点击子节点,子节点部分勾选时父节点处于半选状态,子节点全部勾选时父节点选中,子节点全部不勾选时父节点未选中。
设置true,严格的遵循父子不互相关联。
1、当你通过函数设置勾选节点的时候,严格通过设置勾选的list中有无此节点来断定是否勾选。
2、当你点击勾选复选框时候,无论点击的哪个节点只会改变当前节点的勾选状态,不存在半选状态。

解决办法就是改为不互相关联,然后手动控制父级选择后的处理

<div class="vab-tree-border">
              <el-tree
                ref="treeRef"
                default-expand-all
                :props="props"
                :data="list"
                node-key="ID"
                show-checkbox
                @check="orgCheck"
                :check-strictly="true"
              >
                <template #default="{ data }">
                  <span>{{ data.Name }}</span>
                </template>
              </el-tree>
            </div>
// vue3写法 ID为你树形数据中当做唯一标识的属性名,Children为下一级集合的属性名
const setChildreChecked = (node, isChecked) => {
      node.forEach((item) => {
        state.treeRef.setChecked(item.ID, isChecked)
        if (item.Children && item.Children.length > 0) {
          state.treeRef.setChecked(item.ID, isChecked)
          setChildreChecked(item.Children, isChecked)
        } else {
          state.treeRef.setChecked(item.ID, isChecked)
        }
      })
    }
    const hanleCheck = (data, node) => {
      const isCheckeds = state.treeRef.getNode(data).checked
      if (isCheckeds) {
        // 判断该节点是否有下级节点,如果有那么遍历设置下级节点为选中
        data.Children &&
          data.Children.length > 0 &&
          setChildreChecked(data.Children, true)
      } else {
        // 如果节点取消选中,则取消该节点下的子节点选中
        data.Children &&
          data.Children.length > 0 &&
          setChildreChecked(data.Children, false)
      }
    }
    const orgCheck = (data, node) => {
      hanleCheck(data, node)
    }
orgCheck(data,node) {//系统权限树操作(多个树同时存在可用名称区别)
  this.hanleCheck(data,node,'orgTree');
},
hanleCheck(data,node,treeName){
  const _this = this
  // 获取当前节点是否被选中
  const isChecked = this.$refs[treeName].getNode(data).checked
  // 如果当前节点被选中,则遍历下级子节点并选中,如果当前节点取消选中,则遍历下级节点并取消选中
  if(isChecked){
    // 判断该节点是否有下级节点,如果有那么遍历设置下级节点为选中
    data.childrenList && data.childrenList.length>0 && setChildreChecked(data.childrenList,true)
  }else{
    // 如果节点取消选中,则取消该节点下的子节点选中
    data.childrenList && data.childrenList.length>0 && setChildreChecked(data.childrenList,false)
  }
  function setChildreChecked(node,isChecked){
    node.forEach(item => {
      data.childrenList && item.childrenList.length>0 && setChildreChecked(item.childrenList,isChecked)
      _this.$refs[treeName].setChecked(item.id,isChecked)
    })
  }

}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。