使用pointer-events改造树节点

项目有个树组件vue-tree-list。现在的需求就是，新增，查询功能只能在子节点上操作，父节点是不允许操作的。
第一想法就是，给父节点加个disabled的标记，然后应用css样式。

 // 禁止元素点击
.vtl-disabled {
      pointer-events: none;
      cursor: not-allowed;
  }

这样做，确实可以让整个节点都无法点击，但是我忽略了一点。因为展开图标也是属于这一个节点的元素。我在整个节点设置了pointer-events: none; 就会导致展开图标也无法点击了，这显然是不合理的。

解决方法：

查了一下pointer-events属性，主要是有两个 none和auto。 none则是禁用鼠标事件，auto为启用鼠标事件。

而需要注意的点是，子元素可以声明pointer-events:auto来解禁父元素的阻止鼠标事件限制。
所以在设置了整个节点为禁止点击的情况下，单独对展开图标设置pointer-events:auto来解决问题。

这样就能完美解决了，父节点无法点击操作，但是又能展开，缩回子节点。美滋滋~