elment-ui树形控件添加图标

打断你个鸡腿儿

已于 2022-02-20 17:28:58 修改

阅读量870

点赞数 1

分类专栏： element ui vue 文章标签： ui elementui

于 2022-02-20 17:09:31 首次发布

本文链接：https://blog.csdn.net/flaw_saint/article/details/123032984

版权

vue 同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

element ui

5 篇文章 0 订阅

订阅专栏

这个博客内容涉及到一个使用Element UI库的自定义树形组件。组件中包含了节点点击事件处理`handleNodeClick`，并实现了节点过滤方法`filterNode`。节点图标根据子节点是否存在而变化，同时通过CSS深度选择器修改了展开、收缩及叶子节点的图标和样式。此外，还展示了如何使用`slot`来自定义节点内容。

摘要由CSDN通过智能技术生成

<el-tree
            ref="tree"
            :data="orgList"
            :props="defaultProps"
            :default-expand-all="false"
            class="treeMenu"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node, data }" class="slot-t-node">
              <template>
                <i
                  v-if="data.ChildItems&&data.ChildItems.length"
                  :class="{
                    'el-icon-folder': !node.expanded, // 节点收缩时的图标
                    'el-icon-folder-opened': node.expanded, // 节点展开时的图标
                  }"
                  style="color: #409eff;"
                />
                <i v-else class="el-icon-document" style="color: #EC933A;" />
                <span>{{ node.label }}</span>
              </template>
            </span>
          </el-tree>

/deep/ .is-leaf{
  background: transparent !important;
  width: 5px;
  height: 5px;
  background-size: 100%;
  margin-right: 5px;
}
/deep/ .el-tree-node__expand-icon{
  background: url(../../../../assets/shu_ic_wzk.png) no-repeat;
  width: 5px;
  height: 5px;
  background-size: 100%;
  margin-right: 5px;
}
/deep/ .expanded{
  background: url(../../../../assets/shu_ic_zk.png) no-repeat;
  width: 5px;
  height: 5px;
  background-size: 100%;
  margin-right: 5px;
  transform: rotate(0deg) !important;
}
/deep/ .el-icon-caret-right:before{
  content: '';
}