el-tree和el-popover结合及阻止popover的点击事件

一、效果图

二、主要代码

<el-tree
     class="filter-tree"
     :data="data"
     :props="defaultProps"
     :filter-node-method="filterNode"
     @node-click="handleNodeClick"
     ref="tree"
 >
     <span slot-scope="{ node, data }">
         <!-- <svg-icon iconClass="tree-open" class="icon1"></svg-icon> -->
         <span style="margin-left: 10px">{{ data.name }}</span>
         <span @click.stop>
         //可以选择用一个< div >将整个< el-popover >包起来，给div加 一个 @click.stop，即可阻止冒泡
             <el-popover
                 placement="right"
                 width="30px"
                 trigger="click"
                 v-model:visible="visibles[node.id]"
                 @show="showPopver(node.id)"
             >
                 <el-button
                     style="display:block;margin-left: 10px"
                     v-if="data.type == 1"
                     type="text"
                     @click="clickAddGroup()"
                     size="small"
                 >
                     添加下级标签组
                 </el-button>
                 <!-- <br /> -->
                 <el-button
                     style="display:block"
                     v-if="data.type == 1"
                     type="text"
                     @click="clickAddTag()"
                     size="small"
                 >
                     添加标签
                 </el-button>
                 <!-- <br /> -->
                 <el-button
                     style="display:block"
                     v-if="data.type == 1"
                     type="text"
                     @click="clickEditGroup()"
                     size="small"
                 >
                     修改
                 </el-button>
                 <el-button
                     style="display:block"
                     v-if="data.type == 2"
                     type="text"
                     @click="clickEdit()"
                     size="small"
                 >
                     修改
                 </el-button>
                 <svg-icon
                     iconClass="gengduo"
                     style="margin-left: 30px"
                     class="icon1"
                     slot="reference"
                 ></svg-icon>
             </el-popover>
         </span>
     </span>
 </el-tree>

data(){
  return{
    data: [],
    visibles: [],
    defaultProps: {
            childTags: 'children',
            label: 'name',
            id: 'value',
     },
  }
}
showPopver(index) {
    this.visibles = this.visibles.map(item => false)
    this.visibles[index] = true
},
filterNode(value, data) {
    if (!value) return true
    return data.name.indexOf(value) !== -1
},
handleNodeClick(data) {
    this.editRow = data
},

链接: https://blog.csdn.net/weixin_44171757/article/details/121405251