vue3 el-tree树结构相关功能实现

• 只有底层的子节点才显示复选框，有子节点的父节点都不显示复选框

因为功能需求要隐藏复选框，还要禁用掉父节点，防止触发点击方法（但是不能防止触发node-click方法）。主要使用props里面的disabled进行筛选

:props="{ children: 'camera', label: 'name', disabled: disabledFn }"

其中children字段主要定义树结构渲染的节点，我使用的是camera，那么后端返回的数据里面的camera数组就会渲染到页面的树结构里面。disabled可以定义为一个方法，这个方法会筛选所有节点

//禁用父节点
const disabledFn = (val: any) => {
  if (val.camera || val.disabled) {
    return true
  }
}

我定义的方法是如果节点数据里面有camera字段或者disabled字段值为false，则这个节点就会被禁用不会触发相关方法。

不显示复选框可以直接设置样式

:deep(.el-tree-node) {
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
    .el-checkbox .el-checkbox__inner {
      display: none;
    }
  }

• current-change方法，node-click方法，check方法 

这三种方法的触发顺序有先后差别

方法触发顺序差别就会导致各自在获取已勾选节点数据的有差别。