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%; */
}
效果图: