vue3 + element-plus 下使用el-tree的相关问题

需求出发点是 以tree形式展示数据，父节点不可以点击，只有子节点可以点击，并且点击节点后边的按钮不可以触发节点的点击事件！！！

el-tree后面自定义添加的图标想要绑定事件应该使用 @click.stop 这样不会触发el-tree本身的node-click方法

以下是相关代码：

<el-tree
            :data="shipTeamInfoCurrentDisplayTreeData"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="clickTreeNodeMethod">
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span style="display: flex; justify-content: left">
                  <div
                    :style="
                      'width: 15px;height:15px;margin-top:2px;margin-right:10px;background-color:' +
                      node.data.value
                    "></div>
                  <span>
                    <span>{{ node.label }}</span>
                    <span style="font-size: 12px">
                      {{
                        node.data.shipTeamName != "" && node.data.shipTeamName == "shipTeam"
                          ? "(" + node.data.childSum + ")"
                          : ""
                      }}</span
                    ></span
                  >
                </span>
                <span>
                  <el-link
                    :type="node.data.viewHideCheck == true ? 'success' : ''"
                    :icon="View"
                    :underline="false"
                    v-if="node.data.shipTeamName != '' && node.data.shipTeamName == 'shipTeam'"
                    @click.stop="hideShipInMap(node.data)"></el-link>
                  <el-link
                    :icon="Grid"
                    :underline="false"
                    style="margin-left: 8px"
                    @click.stop="openShipListTable(node.data.id)"
                    v-if="
                      node.data.shipTeamName != '' && node.data.shipTeamName == 'shipTeam'
                    "></el-link>
                  <el-link
                    :icon="EditPen"
                    :underline="false"
                    :style="
                      node.data.id != defaultShipTeamId
                        ? 'margin-left: 8px'
                        : 'margin-left: 8px;margin-right: 22px;'
                    "
                    @click.stop="editShipTeamOrShipInfo(node.data)"></el-link>
                  <el-link
                    :icon="Close"
                    :underline="false"
                    v-if="node.data.id != defaultShipTeamId"
                    style="margin-left: 8px"
                    @click.stop="deleteShipTeamOrShipBtn(node.data)"></el-link>
                </span>
              </span>
            </template>
          </el-tree>