elementUi的树tree组件的使用

element-ui的tree的使用

数据源的构造通用方法

树结构数据通用结构样例：

[
 {
      id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      },
     {
         id: 2,
         label: '一级 2',
         children: [{
           id: 5,
           label: '二级 2-1'
         }, {
           id: 6,
           label: '二级 2-2'
         }]
       },
      {
         id: 3,
         label: '一级 3',
         children: [{
           id: 7,
           label: '二级 3-1'
         }, {
           id: 8,
           label: '二级 3-2'
         }]
      }
    ]

通用list数据源样例（能分辨父子关系的list）：

listTreeData: [
        {
          id:'1',  
          name: '根目录',  
          parentCode:'-1',// 根目录标志
          catalogId :'111111', // 目录标识
        },
        {
          id:'2',
          name:'目录1',
          parentCode:'111111',
          catalogId:'aaaaaa',
        },
        {
          id:'3',
          name:'目录2',
          parentCode:'111111',
          catalogId:'bbbbbb',
        },
        {
          id:'4',
          name:'目录3',
          parentCode:'111111',
          catalogId:'cccccc',
        },
        {
          id:'1-1',
          name:'目录1-1',
          parentCode:'aaaaaa',
          catalogId:'dddddd',
        },
        {
          id:'1-2',
          name:'目录1-2',
          parentCode:'aaaaaa',
          catalogId:'eeeeee',
        },
        {
          id:'1-3',
          name:'目录1-3',
          parentCode:'aaaaaa',
          catalogId:'ffffff',
        },
        {
          id:'1-4',
          name:'目录1-4',
          parentCode:'aaaaaa',
          catalogId:'gggggg',
        },
        {
          id:'2-1',
          name:'目录2-1',
          parentCode:'bbbbbb',
          catalogId:'iiiii',
        },
        {
          id:'2-2',
          name:'目录2-2',
          parentCode:'bbbbbb',
          catalogId:'jjjjjj',
        },
        {
          id:'2-3',
          name:'目录2-3',
          parentCode:'bbbbbb',
          catalogId:'kkkkkk',
        },
        {
          id:'2-4',
          name:'目录2-4',
          parentCode:'bbbbbb',
          catalogId:'lllll',
        },
        {
          id:'3-1',
          name:'目录3-1',
          parentCode:'cccccc',
          catalogId:'333333',
        },
        {
          id:'3-2',
          name:'目录3-2',
          parentCode:'cccccc',
          catalogId:'55555',
        },
        {
          id:'3-3',
          name:'目录3-3',
          parentCode:'cccccc',
          catalogId:'666666',
        },
        {
          id:'3-4',
          name:'目录3-4',
          parentCode:'cccccc',
          catalogId:'7777777',
        }
      ]

list数据转树结构数据通用方法：

// 将list 结构的数据转成tree结构
    // myId 表示当前结点的唯一值
    // pId 表示父节点的唯一值
    // list list数据源 含有父子关系的数据源
    list2Tree:function(myId,pId,list)
    {
      debugger;
      var nodes = [] ;
      // get the top level
      for(var i=0;i<list.length;i++)
      {
        var row = list[i];
        if( !this.exists(list,row[pId],myId))
        {
            row.label = row.name;
            nodes.push(row);
        }
      }
      var toDo = [] ;
      for(var j=0 ;j<nodes.length;j++)
      {
        toDo.push(nodes[j]);
      }

      while(toDo.length)
      {
          var node = toDo.shift();// the parent node
          // get the children node 
          for(var k=0;k<list.length;k++)
          {
            var row1 = list[k];
            if(  row1[pId] == node[myId] )
            {
                row1.label = row1.name;  // label为树节点显示的名字，若list数据中已经存在label了，则此处可以不用，无id这个字段则需要跟这个类似处理  
                if(node.children)
                {
                  node.children.push(row1);
                }
                else
                {
                  node.children =[row1];
                }
                 toDo.push(row1);
            }
            
          }
      }
      return nodes ;
    },
    exists:function(list,parentId,myId)
    {
        for(var i=0;i<list.length;i++)
        {
          if(list[i][myId] === parentId)
          {
              return true;
          }
        }
        return false ;
    },

通用方法处理参考资源路径如下：https://www.cnblogs.com/guoyansi19900907/p/7490160.html

转化后的tree结构数据源和树通用样例结构一直，数据中必须存在id,label,children。

对树节点的过滤处理方法

filter-node-method：
对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏

具体的方法说明以及树的使用，可以参考以下资源路径：https://element.eleme.cn/#/zh-CN/component/tree

本人亲测方案完整方案如下：

<template>
<div class="treePlane">
    <div class="filterPlane" >
        <el-row>
            <el-col :span='6'>
                <el-input v-model="name" placeholder='请输入'/>
            </el-col> 
            <el-col :span='6'>
                <el-button @click="search" >查询</el-button>
            </el-col> 
             <el-col :span='4'>
                <el-button @click="reset">重置</el-button>
            </el-col> 
        </el-row>
       
    </div>
    <el-tree
        :data="transformData"
        ref="treeComponent"
        show-checkbox
        :default-expand-all=true
        :filter-node-method="filterNode"
        node-key="name">
    </el-tree>
</div>
</template>
<script>
import tree from '@/assets/js/treeData.js'


export default {

  mixins: [tree],
  data () {
    return {
      name: '',
      transformData:[],
    }
  },
  created:function() {
      this.init();
  },
  methods:
  {
    init: function (isInit) {
        if(!isInit)
        {
          this.transformData =[];
        }
        var a = 'catalogId' ;
        var b= 'parentCode';
        var data = this.list2Tree(a,b,this.listTreeData);
        debugger;
        this.transformData = data;
    },
    search:function()
    {
        var value = this.name ;
        this.$refs.treeComponent.filter(value.trim())
    },
    reset: function () {
      this.name = '';
      this.$refs.treeComponent.filter('')
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 将list 结构的数据转成tree结构
    list2Tree:function(myId,pId,list)
    {
      debugger;
      var nodes = [] ;
      // get the top level
      for(var i=0;i<list.length;i++)
      {
        var row = list[i];
        if( !this.exists(list,row[pId],myId))
        {
            row.label = row.name;
            nodes.push(row);
        }
      }
      var toDo = [] ;
      for(var j=0 ;j<nodes.length;j++)
      {
        toDo.push(nodes[j]);
      }

      while(toDo.length)
      {
          var node = toDo.shift();// the parent node   方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
          // get the children node 
          for(var k=0;k<list.length;k++)
          {
            var row1 = list[k];
            var a= row1[pId] ;
            var b = node[myId] ;
            if( a == b )
            {
                // row1.children = [];
                row1.label = row1.name;
                if(node.children)
                {
                  node.children.push(row1);
                }
                else
                {
                  node.children =[row1];
                }
                 toDo.push(row1);
            }
            
          }
      }
      return nodes ;
    },
    exists:function(list,parentId,myId)
    {
        for(var i=0;i<list.length;i++)
        {
          if(list[i][myId] === parentId)
          {
              return true;
          }
        }
        return false ;
    },
  }
}
</script>
<style scoped>
  .treePlane{
      margin-left: 20%;
  }
</style>

其中引入的js文件内容就是上面提到的 通用list数据源样例（能分辨父子关系的list）：

效果图如下：

声明：本着尊重他人知识产权和尊重他人劳动成果的原则，以上涉及参考他人博客内容部分，原作者博客地址已附上相应位置。
如需转载本文，请附上本文原地址，如若未附上本文地址，本文作者保留相关追究权利。