Element UI 树形控件子节点右侧添加图标及悬浮提示实现

作者:小布丁时间:2026-10-31 10:41:02浏览:540

本文介绍如何在 Element UI 的 el-tree 组件中,通过自定义节点内容实现子节点右侧添加图标及数据。利用 CSS 布局控制样式,并结合鼠标悬浮事件显示额外文字信息,提升用户交互体验。

Element UI 树形控件子节点右侧图标与悬浮提示实现

首先,我们需要编写相关的代码来实现这一功能。

 <el-tree
                        v-loading="nameLoding"
                        :data="data"
                        node-key="id"
                        :highlight-current="true"
                        empty-text="暂无数据"
                        :props="defaultPropsIndex"
                        default-expand-all
                        :filter-node-method="filterNodeIndex"
                        ref="treeName"
                        @node-click="getCheckedNodes"
                      >
                        <span
                          class="custom-tree-node"
                          slot-scope="{ node, data }"
                        >
                          <span>{{ node.label }}</span>
                          <span v-if="node.level > 1">
                            <span
                              style="
                                text-align: left;
                                width: 63px;
                                display: inline-block;
                              "
                            >
                              <el-tooltip
                                class="item"
                                effect="dark"
                                content="拥有的指标权限个数"
                                placement="top"
                              >
                                <i
                                  title=""
                                  class="el-icon-s-marketing"
                                  style="color: rgb(103, 194, 58)"
                                ></i> </el-tooltip
                              ><span style="margin-right: 10%">{{
                                data.num
                              }}</span></span
                            >
                            <span
                              style="
                                text-align: left;
                                width: 71px;
                                display: inline-block;
                              "
                            >
                              <el-tooltip
                                class="item"
                                effect="dark"
                                content="拥有的访问权限个数"
                                placement="top"
                              >
                                <i
                                  class="el-icon-success"
                                  style="color: rgb(103, 194, 58)"
                                ></i> </el-tooltip
                              ><span style="margin-right: 10%">{{
                                data.sub_num
                              }}</span>
                            </span>
                          </span>
                        </span>
                      </el-tree>

接着,定义必要的 CSS 样式以控制节点的外观和布局。

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  /* padding-right: 8px; */
  /* padding-right: 15%; */
}

以下是实现后的效果展示图。

Element UI 树形控件子节点右侧图标与悬浮提示实现

至此,关于 Element UI 树形控件子节点右侧添加图标及鼠标悬浮显示文字的实现方法介绍完毕。如需了解更多相关内容,可搜索本站往期文章或继续浏览后续文章,感谢大家的支持!

作者最新文章