element怎么让树形控件（el-tree）点击只显示自己元素的弹出框(el-popover)

最新推荐文章于 2024-04-07 18:02:37 发布

q249859693

最新推荐文章于 2024-04-07 18:02:37 发布

阅读量1.4k

点赞数 1

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/q249859693/article/details/124864133

版权

本文介绍了如何使用Element UI的el-tree组件实现点击节点时，仅显示对应元素的el-popover弹出框。通过设置visible属性并利用for循环控制，当点击节点时，其他节点的弹出框隐藏，只显示目标节点的配置。

摘要由CSDN通过智能技术生成

element怎么让树形控件（el-tree）点击只显示自己元素的弹出框(el-popover)

组件的 :visible属性
给tree每个元素都设置visible[i]，点击自己时，for循环把自己的对应的visible[i]设置为true，其他的为false。代码如下：

html:

<el-tree
 	:data="data"
	node-key="id"
    default-expand-all
    :default-checked-keys="[1]"
    :expand-on-click-node="false"
    ref="tree"
    @node-click="handleNodeClick"
    :highlight-current="true"
>
	<span class="custom-tree-node" slot-scope="{ node, data }">
                <span class="tree-lable" v-if="!data.showInput">{{
                  node.label
                }}</span>
                <span>
                  <el-button
                    type="text"
                    size="mini"
                     @click.prevent="visiblePopover(data.id)"
                  >
                    <!-- 参考el-popover组件 :visible属性 -->
                    <el-popover
                      placement="left"
                      trigger="click"
                      v-model:visible="visibles[data.id]"
                    >
                    <!-- 下面是为弹出框内容 -->
                    <a><li>编辑</li></a>
                    <!-- 下面是显示在树形控件的元素 -->
  					<span slot="reference" >设置</span>
     				</el-popover>
     				</el-button>
                </span>
              </span>
</el-tree>

data:

data(){
	return{
		visibles: [],
	}
}

methods:

   visiblePopover (a) {
      for (let i = 1; i < this.visibles.length; i++) {
        if (i == a) {
          this.visibles[i] = true
        } else {
          this.visibles[i] = false
        }
      }
    },