今天做一个需求,树形控件展示数据,但领导觉得element自带的树形控件箭头不好看,
想要换成加减号的,没办法,谁让我就宠着他呢,在网上看了一堆文件,基本上自定义图标都很明确的介绍了如何操作。但是还是没有隐藏自带的图标,我看了一下内容,自己找了找方法,最终效果就是这样实现了,现在给大家说一下具体的操作情况
<el-tree :data="data" node-key="id" :expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }" style="display: flex;">
<i v-if="!data.children" class=""></i><-- 没有子级所展示的图标 -->
<i v-else-if="node.expanded" class="el-icon-minus"></i><-- 展开后的图标 -->
<i v-else class="el-icon-plus"></i><-- 未展开的图标 -->
<div style="display: flex;justify-content: space-between;width: 50vw;">
<span>{{ node.label }}</span>
<div>
<span>王者峡谷部 李白</span>
<span class="blues" style="font-size: 1em;margin-left: 40px;">剩 30 天</span>
</div>
</div>
</span>
</el-tree>
这个是组件中的内容。下图是初步完成后的效果:
组件中的加号减号已经加上了,现在就是把箭头去掉,我试了一些方法,要么隐藏后直接消失,新添加的图标无法触发展开功能,要么就是隐藏后位置不对。所以我用到了opacity这个属性,下面是配置的css:
// 自定义图标中隐藏自带箭头
::v-deep .el-tree-node__content>.el-tree-node__expand-icon {
position: absolute;
opacity: 0;
}
::v-deep .el-tree-node__content {
position: relative;
}
设置好后是这样的效果: