el-tree 样式自定义树形控件

chengchong_cc

已于 2023-03-22 15:07:45 修改

阅读量1.8k

点赞数 1

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

于 2023-03-22 08:27:50 首次发布

本文链接：https://blog.youkuaiyun.com/chengchong_cc/article/details/129687384

版权

vue 同时被 2 个专栏收录

89 篇文章

订阅专栏

element ui

50 篇文章

订阅专栏

文章展示了如何在Vue中使用ElementUI的el-tree组件，包括设置节点点击事件、自定义节点图标、以及处理节点高亮的样式。同时，文章提到了解决el-tree当前选中背景在点击其他地方后消失的问题，并提供了相应的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.组件

    <el-tree
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        :filter-node-method="filterNode"
        @node-click="nodeClick"
        node-key="id"
        default-expand-all
        :highlight-current="showTree"
        ref="tree">
        <span class="custom-tree-node" slot-scope="{ node, data }" style="display: flex;align-items: center;margin-left: 8px;">
          <span class="icon">
            <img src="./img/flag.png" v-if="node.level==1">
            <img src="./img/protect.png" v-if="node.level==2">
            <img src="./img/camer.png" v-if="node.level==3">
          </span>
          <span class="labelClass">{{ node.label }}</span>
          <span class="play" @click="play" v-if="isShowNode(data)" style=""><img src="./img/play.png"></span>
          <span class="inter" v-if="isShowNode(data)" style=""></span>
          <span class="playBack" v-if="isShowNode(data)" style=""  @click="playBack"><img src="./img/playback.png"></span>
        </span>
      </el-tree>

2.样式

 /deep/ {
    .el-tree-node__label {
      width: 124px;
      height: 18px;
      font-size: 14px;
      font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 18px;
    }

    .el-tree {
      background: #02163C;
    }


    .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
      // 设置颜色
      color: #FFFFFF;
      background-color: #2255a3 !important;
      background: #2255a3 !important;
    }

    .el-tree-node:focus > .el-tree-node__content {
      background-color: #2255a3;
      color: #FFFFFF;
    }

    .el-tree-node > .el-tree-node__content:hover {
      background-color: #2255a3 !important;
      background: #2255a3 !important;
    }

    .el-tree-node.is-current > .el-tree-node__content {
      background-color: #2255a3 !important;
      background: #2255a3 !important;
    }

    .el-tree-node__content:hover {
      background-color: #2255a3 !important;
      background: #2255a3 !important;
    }

    .el-tree-node__content {
      height: 40px;
    }

    .custom-tree-node{
      height: 40px;
      font-size: 14px;
      font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 18px;
    }

    .el-tree .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    //有子节点 且未展开
    .el-tree .el-icon-caret-right:before {
      background: url("./img/plus.png") no-repeat 0 3px;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }

    //有子节点 且已展开
    .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url("./img/subtract.png") no-repeat 0 3px;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }

    //没有子节点
    .el-tree .el-tree-node__expand-icon.is-leaf::before {
      background: transparent;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }

    /* 点击树结构项的选中颜色 */
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color:  #2255a3;
  }

  .el-tree .el-tree-node__content>.el-tree-node__expand-icon {
      padding: 8px;
      margin: 6px;
      position: absolute;
      right: 3px !important;

    }

  .tree {
    width: 440px;
    height: 849px;
    border: 1px solid;
    border-image: linear-gradient(132deg, rgba(126, 187, 253, 0), rgba(107, 161, 253, 1), rgba(88, 135, 254, 0), rgba(54, 89, 254, 1)) 1 1;
    background: #02163C;
  }

3. el-tree 自定义icon

参考网址：https://blog.youkuaiyun.com/qq_30351747/article/details/121247796

4.element-ui trr树形结构点击当前背景再点击其它地方会消失问题解决，以及修改当前背景色

参考网址：https://blog.youkuaiyun.com/weixin_44903107/article/details/105513492