devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用element-ui中tree树状图_element ui树状图

作者：小蓝xlanll | 2024-03-18 01:11:04

赞

踩

element ui树状图

效果图
在这里插入图片描述
1、通过slot-scope插槽来自定义样式
:icon-class="'1'"这里主要是为了把icon给冲突掉不显示 随便赋个值就可以

<el-tree
    :data="data"
    node-key="id"
    :default-expanded-keys="active"
    ref="selectTree"
    :icon-class="'1'" 
    :indent="29"
    :highlight-current="true"
    :props="defaultProps">
    <span class="my-custom" slot-scope="{node,data}">
        <span v-if="node.parent.expanded" class="heng"></span>
        <span v-if="node.expanded" :style="'bottom:-'+  (node.childNodes.length * 26 - 5.1) +'px;'+'height:' + (node.childNodes.length * 26 - 4) + 'px'" class="shu"></span>
      <span class="zi"> 
        <!-- node.expanded -->
        <i v-if='node.childNodes.length != 0 ' @click="handleIconClick(node,data)" :class="['iconfont',,node.expanded ? 'icon-jian' :'icon-jia','tree-icon']"></i>
        {{node.label}}
      </span>
    </span>
</el-tree>    

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

2、把所有的内容全部折叠

for(var i=0;i<this.$refs.selectTree.store._getAllNodes().length;i++){
  this.$refs.selectTree.store._getAllNodes()[i].expanded = false;
}

  • 1
  • 2
  • 3

3、设置要展开的内容
主要是通过这个el-tree中的default-expanded-keys这属性来设置要默认展开的内容
url：http://localhost:8080/#/tree?active=7

:default-expanded-keys="active"
 this.active =  this.$route.query.active ? this.$route.query.active.split(',') : [];

  • 1
  • 2

4、设置选中样式
主要是通过setCurrentKey方法来实现
因为一次只能激活一个所有就不能传数组了
元素在被激活时会有 is-current class名

.app{
 .is-current>.el-tree-node__content{
    animation:mymove 0.66s infinite alternate;
    -webkit-animation:mymove 0.66s infinite alternate;
  }
  @keyframes mymove
  {
    from {background:#f0f7ff;}
    to {background:rgb(197,216,255);}
  }

  @-webkit-keyframes mymove /*Safari and Chrome*/
  {
    from {background:#f0f7ff;}
    to {background:rgb(197,216,255);}
  }
  

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
this.$refs.selectTree.setCurrentKey(this.active[0])

  • 1

5、样式问题通过node中属性来判断当前元素是否处于展开状态或者被展开状态来判断是否要显示线

所有代码

<template>
    <div class="app">
        <el-tree
            :data="data"
            node-key="id"
            :default-expanded-keys="active"
            ref="selectTree"
            :icon-class="'1'"
            :indent="29"
            :highlight-current="true"
            :props="defaultProps">
            <span class="my-custom" slot-scope="{node,data}">
                <span v-if="node.parent.expanded" class="heng"></span>
                <span v-if="node.expanded" :style="'bottom:-'+  (node.childNodes.length * 26 - 5.1) +'px;'+'height:' + (node.childNodes.length * 26 - 4) + 'px'" class="shu"></span>
              <span class="zi"> 
                <!-- node.expanded -->
                <i v-if='node.childNodes.length != 0 ' @click="handleIconClick(node,data)" :class="['iconfont',,node.expanded ? 'icon-jian' :'icon-jia','tree-icon']"></i>
                {{node.label}}
              </span>
            </span>
        </el-tree>    
    </div>    
</template>
<script>
export default {
    name:"tree",
    data() {
      return {
        active:[],
        data: [{
          id: 1,
          label: '一级 1',
          icon:'iconfont icon-jia',
          children: [{
            id: 4,
            label: '二级 1-1',
            icon:'iconfont icon-jia',
            children: [{
              id: 9,
              label: '三级 1-1-1',
              icon:'iconfont icon-jia',
            }, {
              id: 10,
              label: '三级 1-1-2',
              icon:'iconfont icon-jia',
            }]
          }]
        }, {
          id: 2,
          icon:'iconfont icon-jia',
          label: '一级 2',
          children: [{
            id: 5,
            icon:'iconfont icon-jia',
            label: '二级 2-1'
          }, {
            id: 6,
            icon:'iconfont icon-jia',
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          icon:'iconfont icon-jia',
          label: '一级 3',
          children: [{
            id: '课堂',
            icon:'iconfont icon-jia',
            label: '二级 3-1'
          }, {
            id: 8,
            icon:'iconfont icon-jia',
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods:{
      handleIconClick(node){
        console.log(node,node.expanded);

      }
    },
    watch:{
      $route:function(){
        // if(this.$route.query.active == ''){
        //   this.$route.query.active = '0'
        // }
        console.log(this.$route.query)
        // if(this.$route.query.active){
        for(var i=0;i<this.$refs.selectTree.store._getAllNodes().length;i++){
            this.$refs.selectTree.store._getAllNodes()[i].expanded = false;
          }
        // }
        this.active =  this.$route.query.active ? this.$route.query.active.split(',') : [];
        this.$refs.selectTree.setCurrentKey(this.active[0])
      }
    },
    computed:{
      // active:function(){
      //   console.log(this.$refs.selectTree)
      //   // for(var i=0;i<this.$refs.selectTree.store._getAllNodes().length;i++){
      //   //   // this.$refs.selectTree
      //   //   // .store._getAllNodes()[i].expanded = false;
      //   // }
      //   if(this.$route.query.active){
      //    return this.$route.query.active.split(',')
      //   }else{
      //     return []
      //   }
      // }
    },
    mounted(){
      // console.log(this.$route.query.active);
      this.active =  this.$route.query.active ? this.$route.query.active.split(',') : [];
      this.$refs.selectTree.setCurrentKey(this.active[0])
    }
}
</script>
<style lang="less" >
.app{
  .my-custom{
    position: relative;
  }
  .heng{
    position: absolute;
    left: -16px;
    width: 16px;
    top:(50%-0.9px);
    height:1.8px;
    background:#cacaca
  }
  @font-face {
    font-family: 'iconfont';  /* project id 1877686 */
    src: url('//at.alicdn.com/t/font_1877686_wtt40d3lrf.eot');
    src: url('//at.alicdn.com/t/font_1877686_wtt40d3lrf.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1877686_wtt40d3lrf.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1877686_wtt40d3lrf.woff') format('woff'),
    url('//at.alicdn.com/t/font_1877686_wtt40d3lrf.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1877686_wtt40d3lrf.svg#iconfont') format('svg');
  }
  .iconfont {
      font-family: "iconfont" !important;
      font-size: 0.6em;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color:#fff;
      background: #cacaca;
      border-radius: 50%;
      padding: 0.2em;
      // line-height: 1.2em;
      font-weight: bold;
      position: relative;
    }

  .icon-jia:before {
      content: "\e615";
  }

  .icon-jian:before {
      content: "\e60c";
  }
  .icon-jian:after{
    // content: '';
    // // border: 1px solid #cacaca;
    // position: absolute;
    // bottom: -1.69em;
    // height:1.6em;
    // width: 1.8px;
    // left: 0.8em;
    // background: #cacaca;
  }
  .shu{
     position: absolute;
      width: 1.8px;
      left: 0.8em;
      height: 0;
      
      background: #cacaca;
  }
  // .el-tree-node__expand-icon{
  //   display: none;
  // }
  // .el-icon-caret-right::after{
  //   content: "\e615";
  // }
  // .el-icon-caret-right{

  // }
  .zi{
    border: 1px solid #ccc;
    border-radius: 0.3em;
    padding: 0.12em 0.24em;
    position: relative;
  }
  .el-tree-node__content{
    margin: 0.1em 0;
  }
  .is-current>.el-tree-node__content{
    animation:mymove 0.66s infinite alternate;
    -webkit-animation:mymove 0.66s infinite alternate;
  }
  @keyframes mymove
  {
    from {background:#f0f7ff;}
    to {background:rgb(197,216,255);}
  }

  @-webkit-keyframes mymove /*Safari and Chrome*/
  {
    from {background:#f0f7ff;}
    to {background:rgb(197,216,255);}
  }
}


</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/259289
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号