vue使⽤element树形组件如何修改树形组件图标让展开和收缩显⽰不同的图标如何修改树形组件前的svg图标
成品效果图
代码实现
使⽤树形组件中的作⽤域插槽 让scope接收参数对象 打印scope得知 如图1 expanded属性展开的时候为true 收缩的时候为false v-if判断还有没有⼦项
图1
//树形组件中的作⽤域插槽
<template #default="scope">
<el-col :span="20">
<svg-icon
v-if="scope.data.children.length !== 0"
:icon-class="panded ? 'jianhao' : 'jiahao'"
/>
<svg-icon v-else icon-class="yuangong" />
<span>{{ scope.data.name }}</span>
<!-- <button @click="doScope(scope)">打印</button> -->
</el-col>
</template>
审查元素得知
svg图
<span class="expanded el-tree-node__expand-icon el-icon-caret-right"></span>⼩三⾓是由这个元素做的给其中某个类添加⽩⾊让⼩三⾓不出现
代码如下
<style>
.el-tree-node__expand-icon{
color: #fff;
}
</style>[
效果图到顶部观看

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。