elementui-树形控件实现子节点右侧添加图标和数据鼠标放上去显示文字效果
作者:hat-ing
这篇文章主要介绍了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%; */ }
效果图:
到此这篇关于elementui-树形控件实现子节点右侧添加图标和数据,鼠标放上去显示文字的文章就介绍到这了,更多相关elementui树形控件子节点右侧添加图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!