VS-Tree组件树形结构：如何点击节点直接展开子节点？

<code class="vue"><vs-tree :animation="true" :data="treedata" :lazy="true" :load="loads" :strict-leaf="true" ref="treecom" v-if="treedata.length"></vs-tree></code>

<code class="vue"><vs-tree :animation="true" :data="treedata" :lazy="true" :load="loads" :strict-leaf="true" ref="treecom" v-if="treedata.length" v-expand-node></vs-tree></code>

<code class="javascript">Vue.directive('expand-node', {
  inserted: function (el, binding, vnode) {
    el.addEventListener('click', function (event) {
      // 找到被点击的节点，这部分依赖于vs-tree组件的结构和数据
      const targetNode = findTargetNode(event.target); // 需要实现findTargetNode函数

      if (targetNode) {
        const nodeId = targetNode.id; // 假设节点有id属性
        vnode.context.$refs.treecom.expandNode(nodeId); // 使用vs-tree的expandNode方法，请替换为实际方法名
      }
    });
  }
});

function findTargetNode(element) {
  //  递归查找最近的vs-tree节点元素，并获取其对应的节点数据。
  //  这部分代码需要根据vs-tree组件的DOM结构进行调整。
  let currentNode = element;
  while (currentNode && !currentNode.classList.contains('vs-tree-node')) { // 替换为vs-tree节点的实际类名
    currentNode = currentNode.parentNode;
  }
  if (currentNode) {
    //  从currentNode中提取节点数据，这部分依赖于vs-tree组件的数据绑定方式
    //  例如：  return currentNode.dataset.nodeData;  或者其他方式获取节点数据
    return currentNode.dataset.nodeData ? JSON.parse(currentNode.dataset.nodeData) : null;
  }
  return null;
}</code>

<code class="vue"><template>
  <div @click="handleClick">
    <vs-tree :animation="true" :data="treedata" :lazy="true" :load="loads" :strict-leaf="true" ref="treecom" v-if="treedata.length"></vs-tree>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      const targetNode = findTargetNode(event.target); // 同方案一中的findTargetNode函数
      if (targetNode) {
        const nodeId = targetNode.id; // 假设节点有id属性
        this.$refs.treecom.expandNode(nodeId); // 使用vs-tree的expandNode方法，请替换为实际方法名
      }
    }
  }
};
</script></code>