Vue前端开发，组件element中的Tree 树形控件

Tree 树形控件

简介

Tree树形有很好层级展示效果，如公司和部门之间的层级关系

Element官方的代码：

<el-tree 
	:data="data" :
	props="defaultProps" 
	@node-click="handleNodeClick"
></el-tree>

<script>
  export default {
     
     
    data() {
     
     
      return {
     
     
        data: [{
     
     
          label: '一级 1',
          children: [{
     
     
            label: '二级 1-1',
            children: [{
     
     
              label: '三级 1-1-1'
            }]
          }]
        }, {
     
     
          label: '一级 2',
          children: [{
     
     
            label: '二级 2-1',
            children: [{
     
     
              label: '三级 2-1-1'
            }]
          }, {
     
     
            label: '二级 2-2',
            children: [{
     
     
              label: '三级 2-2-1'
            }]
          }]
        }, {
     
     
          label: '一级 3',
          children: [{
     
     
            label: '二级 3-1',
            children: [{
     
     
              label: '三级 3-1-1'
            }]
          }, {
     
     
            label: '二级 3-2',
            children: [{
     
     
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
     
     
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
     
     
      handleNodeClick(data) {
     
     
        console.log(data);
      }
    }
  };
</script>

组件效果：

解释

<el-tree 
	:data="data" :
	props="defaultProps" 
	@node-click="handleNodeClick"
></el-tree>

属性的作用

属性	功能
props	和table标签的prop功能类型，方便其他组件或下一个方法使用
data	树形显示需要的数据其中包含label和children，树形根据data数据进行显示
node-click	节点点击事件，当节点被点击时触发响应，并将组件的data数据,node节点传入方法内，一般作为向后端传参的指令

自己定义一个Tree树形控件

关于公司层级

<!--v:显示-->
<el-tree
      :data="depOptions"
      :props="defaultProps"
      :filter-node-method="filterNode"
      node-key="id"
      ref="tree"
      :default-expanded-keys="['1', '2']"
      highlight-current
      @node-click="handleNodeClick"
    >
    </el-tree>

:filter-node-method："filterNode" 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏。filterNode是自己定义的方法，根据自己的判断条件进行返回true或者是false，下面是我自己定义的方法

	<el-input v-model="deptName"></el-input>  // 这是一个输入框
	<el-tree
      :data="depOptions"
      :filter-node-method="filterNode"
      highlight-current
      @node-click="handleNodeClick"
    >
    </el-tree>
	
	// 进行监听deptName值得变化，当deptName的值发生变化时，就会传参tree的filter
	data:{
		deptName:{};
	}
	wathc:{
		deptName(val) {
        	this.$refs.tree.filter(val);
        }
      }
    methods:{
    	filterNode(value, data) {
        	if (!value) return true;
        	return data.label.indexOf(value) !== -1;
   		},
    }

此功能实现的是，在输入框输入想要查找的部门，tree控件帮你筛选出你想要的部门

搜索显示实现逻辑：