手把手教你将ATree改造成带自定义操作的树形结构

在《12 接口自动化 接口管理模块开发（一）》中，使用Ant Design Vue提供的ATree开发了类似postman中的树形结构，如下图。本章将手把手教你你如何利用ATree开发出这种树形效果。

首先在Ant Design Vue找到树形组件，在演示代码中找到最符合自己要求的拷贝到前端代码中。这里选择的是「自定义展开/折叠图标」的这种，满足了想要的展开/折叠样式。

「请求方式」样式

基于已有的样式然后进行改造，首先是节点前面的「请求方式」。
在演示代码中已经提供了「自定义节点图标」的方案，

通过查看演示代码可以知道，这里是使用了插槽，将「icon」进行了自定义，因此我们需要自定义插槽的内容，将「请求方法」的样式放入插槽中。

• 在treeData中给二级节点增加一个「method」字段，用来标识「请求方式」

• 在<a-tree>标签上新增show icon属性

• 在<a-tree>标签下新增「icon」插槽的内容，这里主要是判断数据源中的method字段，然后根据不同的method设置不同的颜色

      <template #icon="{ method }">
        <template v-if="method === 'GET'">
          <span class="api-method" style="color: #0bbb52">{{ method }}</span>
        </template>
        <template v-if="method === 'POST'">
          <span class="api-method" style="color: #fcb100">{{ method }}</span>
        </template>
        <template v-if="method === 'PUT'">
          <span class="api-method" style="color: #0978e7">{{ method }}</span>
        </template>
        <template v-if="method === 'PATCH'">
          <span class="api-method" style="color: #07c0e9">{{ method }}</span>
        </template>
        <template v-if="method === 'DELETE'">
          <span class="api-method" style="color: #e71f12">{{ method }}</span>
        </template>
      </template>

• 重启项目刷新页面后，就可以看到带「请求方式」的树形结构了，然后需要对样式进行调整，调整样式可以先直接在元素上右键，选择「检查」，就可以看到对应的html代码了，先在浏览器上将样式调整到满意之后再补充到项目代码中，这样避免了不断调试的过程。

• 通过在浏览器中调试，可以看到是.ant-tree .ant-tree-node-content-wrapper .ant-tree-iconEle设置了图标所在位置的宽度（width）,因此可以在style区域修改样式。

• 设置样式时，注意不要使用scoped，如果使用了将是局部样式，对Ant Desgin Vue外部引入的组件样式将无效。下面代码中还设置了字体的大小，Chrome浏览器限制了字体大小最小为12px，小于12px将无效，如果希望字体更小一点，可以换成图片。

<style lang="scss">
.api-sider2 {
  .api-method{
    font-size: 12px;
    padding-right: 10px;
  }
  .ant-tree {
    .ant-tree-node-content-wrapper {
      .ant-tree-iconEle {
        width: 48px;
      }
    }
  }
}
</style>

• 重启项目刷新页面后，就可以看到是按照预期的样式进行展示了。

「更多操作」样式

完成左侧的「请求方式」后，接下来完成右侧「…」区域，这个按钮主要使用根据不同的节点展示不同的操作，例如：

• 分类节点 用来展示分类，操作可以是编辑、新增分类、新增接口、删除。
• 接口节点 用来展示接口，操作可以是新增用例、删除。
• 用例节点 用来展示用例，暂时不提供操作按钮

在ATree中没有提供自定义节点右侧组件的插槽，但是title本身也是提供了插槽的方案，因此可以将title插槽中填充自定义的样式，左侧显示名称，右侧显示「…」

• 首先在treeData中给每个节点增加一个「type」字段，用来标识节点类型

• 在<a-tree>标签下新增「title」插槽的内容，这里主要是展示节点名称，然后判断数据源中的type字段，根据不同的type设置不同操作按钮

<template #title="{ title, type }">
  <div>
    <span>{{ title }}</span>
    <a-popover trigger="hover" v-if="type == 'collection'">
      <template #content>
        <a-button type="link">编辑</a-button>
        <a-button type="link">新增分类</a-button>
        <a-button type="link">新增接口</a-button>
        <a-button type="link" danger>删除</a-button>
      </template>
      <a-icon
        class="iconfont icon-gengduo fr"
        style="color: #6b6b6b; cursor: pointer; padding-right: 10px"
      />
    </a-popover>
    <a-popover trigger="hover" v-if="type == 'api'">
      <template #content>
        <a-button type="link">新增用例</a-button>
        <a-button type="link" danger>删除</a-button>
      </template>
      <a-icon
        class="iconfont icon-gengduo"
        style="color: #6b6b6b; cursor: pointer; padding-right: 10px"
      />
    </a-popover>
  </div>
</template>

• 重启项目刷新页面，可以看到每个节点名称后都增加了「…」，让鼠标悬停时，会展示对应节点的操作按钮

• 接下来同样是在在组件上右键，点击【检查】，在浏览器中对样式进行调整。

1. 首先，icon和title换行了，icon是inline-block，将title也同样要设置为inline-block，即行内块元素 ，这样将不再换行显示

2. 其次，将「…」固定在右侧，只需要加上float:right样式既可

3. title的宽度要占满整行，这需要它的外层的组件都是占满整行的。

因此可以不断找外层的组件，将外层的组件width均设置为100%。

<style lang="scss">
.api-sider2 {
  .api-method {
    font-size: 12px;
    padding-right: 10px;
  }
  .ant-tree {
    .ant-tree-treenode {
      width: 100%;

      .ant-tree-node-content-wrapper {
        width: 100%;

        .ant-tree-iconEle {
          width: 48px;
        }
      }
    }
  }
}
</style>

然后重启项目，刷新页面

可以看到「…」确实是展示在最右侧了，但是出现了新的问题，存在「请求方式」的节点，再次变成了两行，这是因为title宽度设置为100%后，没有位置留给「请求方式」了，所以换行了，解决这个问题需要用到计算属性，即当节点类型为接口类型时，title的宽度为100%-「请求方式」宽度。

4. 将title的宽度改为计算属性，因为要根据节点类型进行设置，因此可以在插槽中根据节点类型，动态设置到元素的style属性。

<template #title="{ title, type }">
  <div
    :style="[
      type == 'collection' ? 'width: 100%' : 'width: calc(100% - 48px);', // 计算属性，即宽度为减去某个固定值后的100%宽度
    ]"
    style="display: inline-block"
  >
    <span>{{ title }}</span>
    <!--省略-->
  </div>
</template>

然后重启项目，刷新页面，可以看到“大功告成”啦，撒花 🎉🎉🎉