关于在vue2中使用el-tree的记录

又写了一天BUG2024-09-11 12:42

此文章会持续更新在使用el-tree过程中应用到的功能...

先看此效果：

html：

javascript 复制代码

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
        //自定义节点内容
        <span slot-scope="{ data }">
        //此处if判断是让最后一个节点使用自定义的图标
          <span v-if="data.children">
            {{ data.label }} 
            (<span style="color: #fff612">{{data.children.length}}</span>)
            </span>
          <span v-else>
            <img src="@/assets/images/xx.png" alt="" /> 
            {{ data.label }}
          </span>
        </span>
</el-tree>

javascript 复制代码

data: [
    {
        label: '菏泽市',
        children: [
            {
                label: '东明县',
                children:[
                    {
                        label: 'xxx1',
                    },
                    {
                        label: 'xxx2',
                    },
                ]
            }
        ]
    }
],

//此处设置数据结构
defaultProps: {
        children: "children",
        label: "label",
        //这里是让第三级节点不使用收起/展开的图标，配合下方css使用
        isLeaf: (data, node) => {
          if (node.level === 2) {
            return true;
          }
        },
      },

css 复制代码

::v-deep {
  .el-tree {
    position: relative;
    cursor: default;
    background: transparent;
    color: #fff;
  }
//取消el-tree自带的hover效果
  .el-tree-node__content {
    &:hover {
      background: transparent !important;
      color: #fff;
    }
  }
    //取消高亮
  .el-tree-node:focus > .el-tree-node__content {
    background: transparent;
  }
//取消el-tree自带的hover效果
  .el-tree-node.is-current > .el-tree-node__content {
    background-color: transparent !important;
  }
//调整普通节点字体大小
  .el-tree-node__label {
    font-size: calc(0.5vw);
  }
//调整一级节点字体大小
  .el-tree > .el-tree-node > .el-tree-node__content > span {
    font-size: calc(0.9vw);
}
//自定义收起/展开节点图标的旋转
  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
//自定义收起图标
  .el-tree .el-icon-caret-right:before {
    color: #5bb9fc;
    content: "\e791";
  }
//自定义展开图标
  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    color: #5bb9fc;
    content: "\e790";
  }
    //配合data中defaultProps使用，去掉第三级节点的图标，也可以使用opacity:0
   .is-leaf::before {
    display: none;
  }
}

关于获取自定义收起/展开的图标：