基于el-tree的自定义侧边菜单栏（手风琴）

话不多说，先上效果图：

主要思路：

　　1、使用elementUI的插槽工具，分别对一级节点和叶节点进行展示

　　2、对样式进行调整

主要代码（vue组件）：

<template>
  <div class="tree-wrap">
    <el-tree
      ref="tree"
      :data="data"
      :props="defaultProps"
      :default-expanded-keys="expendIdArr"
      node-key="id"
      :indent="0"
      icon-class="mycons"
      :filter-node-method="filterNode"
    >
      <template slot-scope="{node, data}">
        <div
          v-if="node.level === 1"
          :class="['tree-header-panel',currentNodeParentId === data.id? 'tree-parent-active' : '', node.expanded ? 'border-bottom-line' : 'border-bottom-line']"
          @click="treeNodeClick(node, data)"
        >
          <p class="tree-header-p">
            <i class="gwlz-iconlaptop iconfont-class"></i>
            <span><b>{{node.label}}</b></span>
          </p>
          <i
            v-if="data.children && data.children.length > 0"
            :class="['iconfont','gwlz-iconangle-right', node.expanded ? 'rotate' : 'rotate1']"
          ></i>
        </div>
        <div
          v-else
          :class="['tree-content-panel',currentNodeId === data.id && node.isLeaf ? 'tree-active' : '', 'leaf-border-bottom-line']"
          @click="treeNodeClick(node, data)"
        >
          <div :style="{'padding-left': (node.level + 1) * 16 + 'px'}">
            <div v-if="data.children" class="tree-content-panel-span">
              <span>
                <i class="gwlz-iconapplication  iconfont-class"></i>
                <span>{{node.label}}</span>
              </span>
              <i :class="['iconfont','gwlz-iconangle-right', node.expanded ? 'rotate' : 'rotate1']"></i>
            </div>
            <div v-else class="tree-content-panel-span">
              <span>
                <i class="gwlz-iconapplication  iconfont-class"></i>
                <span>{{node.label}}</span>
              </span>
              <i style=" 8px;height: 16px;display: inline-block;"></i>
            </div>
          </div>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script>
export default {
  name: 'LeftPanel',
  data () {
    return {
      currentNodeId: '',
      currentNodeParentId: '',
      expendIdArr: [],
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1'
        }, {
          id: 9,
          label: '二级 1-2'
        }, {
          id: 10,
          label: '二级 1-3'
        }
        ]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        label: '一级 3',
        id: 11,
        children: [{
          id: 12,
          label: '二级 3-1'
        }, {
          id: 13,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted () {
    this.getFirstData(this.data)
    this.currentNodeParentId = this.data[0].id
  },
  methods: {
    getFirstData (data) {
      if (data && data.length > 0) {
        if (data[0].children && data[0].children.length > 0) {
          this.getFirstData(data[0].children)
        } else {
          this.expendIdArr.push(data[0].id)
          this.currentNodeId = data[0].id
        }
      }
    },
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    treeNodeClick (node, data) {
      if (node.isLeaf) {
        this.currentNodeId = data.id
        this.getParentNodeId(node)
      }
    },
    getParentNodeId (node) {
      if (node) {
        if (node.level === 1) {
          this.currentNodeParentId = node.data.id
        } else {
          this.getParentNodeId(node.parent)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .tree-wrap {
    height: 100%;
     300px;
    border-right: 1px solid #dcdfe6;
    overflow-y: auto;
    box-sizing: border-box;

    /deep/ .mycons {
      padding: 0;
    }

    /deep/ .el-tree {
      border-radius: 0;
      .el-tree-node:focus > .el-tree-node__content {
        background-color: #ffffff !important;
      }

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

        > .el-tree-node__content {
           100%;
          height: auto;
          line-height: 54px;

          &:hover {
            background-color: rgba(220, 223, 230, 0.15);

            span, i {
              color: #409eff;
            }
          }
        }

        .el-tree-node__children {
          .el-tree-node__content {
            height: auto;
            line-height: 54px;

            &:hover {
              background-color: rgba(220, 223, 230, 0.15);

              span, i {
                color: #409eff;
              }
            }
          }
        }

        .tree-header-panel {
          display: flex;
           100%;
          height: 100%;
          padding-left: 16px;
          justify-content: space-between;
          align-items: center;
          font-size: 18px;
        }

        .tree-content-panel {
          display: inline-block;
           100%;
          height: auto;
          line-height: 54px;
        }

        .tree-active {
          font-weight: bold;
          position: relative;

          & span {
            color: #409eff;
          }
        }

        .tree-parent-active {
          color: #409eff;
          background: #f5f7fa;
          font-weight: bold;
          position: relative;

          &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
             6px;
            height: 100%;
            background: #409eff;
          }
        }

        .tree-content-panel-span {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 17px;
          & span{
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }

        .border-line {
          border-top: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
        }

        .border-bottom-line {
          border-bottom: 1px solid #dcdfe6;
        }

        .leaf-border-bottom-line {
          border-bottom: 1px dashed #dcdfe6;
        }

        .border-top-line {
          border-top: 1px solid #dcdfe6;
        }
      }

      .tree-header-p {
        display: flex;
        align-items: center;
        margin: 0;
      }
      .iconfont-class {
        font-size: 23px;
        margin-right: 15px;
      }

      .iconfont {
        margin-right: 16px;
        height: 20px;
        line-height: 20px;
      }

      .rotate {
        transform-origin: center center; //旋转中心要是正中间 才行
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transition: transform 0.2s; //过度时间 可调
        -moz-transition: -moz-transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -o-transition: -o-transform 0.2s;
        -ms-transition: -ms-transform 0.2s;
      }

      .rotate1 {
        transform-origin: center center;
        transform: rotate(0deg); //返回原点
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transition: transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -moz-transition: -moz-transform 0.2s;
        -o-transition: -o-transform 0.2s;
        -ms-transition: -ms-transform 0.2s;
      }
    }
  }
</style>

-------------------------------------------------------------------------------------------------

 

QQ群：871934478

 

版权所有，转载请注明源地址                          

 

-------------------------------------------------------------------------------------------------