需求出发点是 以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>