最近的写的一个项目，需要用的a-tree。甲方就觉得那个小三角不好点，需要点文字也可以展开。就需要小小的改动一哈。

效果图

过程：

实现起来还是很简单的

1.我们可以看ant的官方文档，发现有一个事件expand是当我们展开/收起时就会触发

expandeKeys绑定到a-tree的值，它选中的值会默认展开 

 

2.根据上一步就知道我们要展开这个树形要绑定的事件跟值 ，绑定到我们的组件中html部分

 <a-tree
      block-node
      @select="clicktree"
      class="trees"
      style="
        min-width: 3.78rem;
        width: 3.78rem;
        color: #becef2;
        background: transparent;
        overflow: auto;
        height: calc(100vh - 1.51rem);
        display: block;
      "
      @expand="expand"
      v-if="tree.treeData.length > 0"
      :load-data="onLoadData"
      :tree-data="tree.treeData"
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
    />

3.这是js部分，主要实现的步骤

首先是选中文字的函数，我们可以得到一个key跟name,key就相当于是一个主键，name就是我们所点击行的信息

首先进行一个判断，我们展开值expandedkeys里面有没有 值，如果没有值，直接点击文字是不生效的，如果没有值，这一步直接把key赋给它就好了

有值的话我们就去调用展开的函数

  const clicktree = (key, name) => {
    if (expandedKeys.value.length == 0) {
      expandedKeys.value = key;
    }
    expand(key, 1);
  };

我们把文档中的两个值都打印出来，发现我们点击小三角得到值是我们所点击行对应的key值，主要是就把我们文字所得到的key绑定到expandedKeys上，就可以实现点击文字实现展开

  const expand = (a, { node }) => {
    console.log(6666, a, expandedKeys.value);
    a = a + '';
    expandedKeys.value.push(a);
    console.log(expandedKeys.value);
  };