elementui-树形控件实现子节点右侧添加图标和数据,鼠标放上去显示文字

1、代码

复制代码
 <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%; */
}

效果图:

相关推荐
用户479492835691523 分钟前
🤫 你不知道的 JavaScript:`"👦🏻".length` 竟然不是 1?
前端·javascript·面试
xingkongv28 分钟前
从“调接口仔”到“业务合伙人”:前端的 DDD 初体验
javascript·前端框架
东北南西36 分钟前
Web Worker 从原理到实战 —— 把耗时工作搬到后台线程,避免页面卡顿
前端·javascript
Zz_waiting.38 分钟前
案例开发 - 日程管理 - 第六期
前端·javascript·vue.js·路由·router
A 风38 分钟前
封装日期选择器组件,带有上周,下周按钮
开发语言·javascript·vue.js
Simon_He1 小时前
vue-markdown-renderer:比 vercel streamdown 更低 CPU、更多节点支持、真正的流式渲染体验
前端·vue.js·markdown
机构师1 小时前
<uniapp><指针组件>基于uniapp,编写一个自定义箭头指针组件
javascript·uni-app·vue·html
小桥风满袖1 小时前
极简三分钟ES6 - 模块化
前端·javascript
BillKu2 小时前
npm 安装命令中关于 @ 的讲解,如:npm install @vue-office/docx vue-demi
前端·vue.js·npm
bestadc2 小时前
LeetCode 几道 Promises 和 Time 的题目
javascript·算法·leetcode