vue+element-ui 对树形组件的一些操作

怀着激动的心颤抖的手写下这篇博客~
先看需求
设计图如下

左边是一组树形结构的数据
右边是根据tree子节点的checkbox 是true或false 来显示的
右边列表可以删除，删除后左边对应的节点的checkbox为false

看起来需求很简单，但其实这个东西就是很简单，因为一开始思路错了所以花了一点时间，使用element-ui 里的树形组件，认真的看了一下官方文档就写出来了，所以兄弟萌，别百度啊，看文档，文档最仔细了。

然后放上代码
template代码

<!--
	:data (绑定的数据)
	show-checkbox (节点是否可选择)
	node-key='id' (每个树节点来作为唯一标识的属性)
	:props='defaultProps'(指定label children等属性)
	check-on-click-node (点击节点时就选中复选框 默认值是false 只有点击框			框的时候才选中)
	@node-click (节点点击时的回调)
	:check-strictly="true"(父子不关联 默认为false)
	ref (绑定dom)
	如果看不懂我写的 可以看官网
-->
<el-tree 
	:data="data" 
	show-checkbox 
	node-key="id" 
	:props="defaultProps" 
	check-on-click-node 
    @node-click="handleNodeClick" 
    :check-strictly="true"    
    ref="tree">
</el-tree>

<div>
	<!--绑定的list数组-->
	<div v-for="(item,index) in list" :key="index">
               <span>{{item}}</span> 
                <i class="el-icon-circle-close" @click="dj(item,index)"></i>
     </div>
</div>

data中的数据

data(){
	return{
		 list: [],
		 data: [{
                    id: 1,
                    label: '一级 1',
                    children: [{
                        id: 4,
                        label: '二级 1-1'
                    }]
                }, {
                    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'
                    }]
                }],
          defaultProps: {
                children: 'children',
                label: 'label'
          }
	}
}

js部分

 mounted() {
 			//页面初始化的时候 设置选中的节点
          this.setCheckedKeys();
          //页面初始化的时候 获取选中的节点
          this.gettreenode();
   },
methods(){
		setCheckedKeys(){
			//setCheckedKeys方法 参数为数组
			this.$refs.tree.setCheckedKeys([4,5])	
		},
		gettreenode(){
			//getCheckedKeys方法 获取选中属性的节点
			let arr = this.$refs.tree.getCheckedKeys();
			let arrs = []
			//遍历数组 获取所有的子节点
			 this.data.forEach((item) =>{
                    item.children.forEach(item =>{
                        arrs.push(item)
                    })
             })
             //遍历数组 如果arr的数据 和 arrs的数据相等 添加到 list中
            for(var i =0;i<arrs.length;i++){
                    for(var j = 0;j<arr.length;j++){
                        if(arrs[i].id == arr[j]){
                            console.log(arrs[i])
                            this.list.push(arrs[i])
                        }
                    }
            }
		},
		//点击节点的事件共三个参数，依次为：
		//传递给 data 属性的数组中该节点所对应的对象、
		//节点对应的 Node、节点组件本身
		  handleNodeClick(node, data) {
		  		//如果当前node里没有children 说明是子节点
                if (!node.children) {
                	//如果当前节点checked为true 就添加这条数据
                    if (data.checked) {
                        this.list.push(node)
                    } else {
                    	//当前节点为false 就遍历list数组对对应的数据 进行删除
                        this.list.forEach((item, index) => {
                            if (item == data.data) {
                                this.list.splice(index, 1)
                            }
                        })
                    }
                }
            }
		//点击删除小图标的事件
		 dj(e, index) {
		 		//先对list进行操作
                this.list.splice(index, 1) 
                //然后对树节点进行操作
                //setChecked方法 把当前节点checked为false(某个节点的勾选状态)接收三个参数 具体看文档 
                this.$refs.tree.setChecked(e.id,false)
          },

}

最后总结：样式没有写哦~，这个东西刚开始没有思路还想了挺久这怎么搞啊，然后其实是很简单的，全是element-ui里的属性，是我太菜了哈哈哈，反正写出来了，就开心。写个博客记录一哈