element tree树形控件自定义图标以及隐藏自带箭头

最新推荐文章于 2024-06-07 17:44:16 发布

苍山洱海胖

最新推荐文章于 2024-06-07 17:44:16 发布

阅读量2.3k

点赞数 4

分类专栏： ====前端==== vue部分文章标签： javascript 开发语言 ecmascript

原文链接：https://blog.csdn.net/luo_luo_yao/article/details/127793576?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EAD_ESQUERY%7Eyljh-1-127793576-blog-99830224.pc_relevant_3mothn_strategy_and_data_recovery&depth_1-utm_sour

版权

====前端==== 同时被 2 个专栏收录

208 篇文章 2 订阅

订阅专栏

vue部分

60 篇文章 0 订阅

订阅专栏

今天做一个需求，树形控件展示数据，但领导觉得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;
  }