Vue 树形组件创建 类似于elment tree

标题话不多说 直接上树形组件代码然后慢慢给大家讲解

我的树形数据是这样 的

data:[
{
	check:false,
	name:"首页",
	id:1,
	all_id:1,
	sub:[{
		check:false,
		name:"首页",
		id:2,
		all_id:1-2,
		sub:[{
			check:false,
			name:"首页",
			id:3,
			all_id:1-2-3,
			}...]
		}...]
}...]

创建第一个component----- treeHeader

<template>
    <div class="_tree">
        <div class="_tree_item" v-for="(tree) in defaultTree" :key="tree.id">
            <el-checkbox v-model="tree.check" @change="changeTree(tree)">{{tree.name}}</el-checkbox>//也可以使用input type = checkbox （项目中用的是element就直接拿来用了）
            <tree-contents v-if="tree.sub" @changeTreeCheck="changeTree2" :default-tree-cont="tree.sub"></tree-contents>
        </div>
    </div>
</template>

<script>
    export default {
        components: {
            TreeContents: () => import('./treeContent.vue')
        },
        name: "treeHeader",
        props: {
            defaultTree: {
                type: Array,
                default:()=> []   //默认值
            }
        },
        data() {
            return {}
        },
        created() {
        },
        methods: {
            changeTree(e){
                this.$emit('changeTreeCheck',e.check,e.all_id,e);
            },
            changeTree2(is_check,all_id,change_arr){
                this.$emit('changeTreeCheck',is_check,all_id,change_arr);
            }
        }
    }
</script>

<style scoped>
    ._tree{
        padding-left: 15px;
    }
    ._tree_item{
        margin-right: 30px;
        line-height: 1.8rem;
    }
</style>

创建第一个component----- treeContent

<template>
    <div class="_tree_cont">
        <div v-for="treCont in defaultTreeCont" :key="treCont.id">
            <el-checkbox v-model="treCont.check" @change="changeTree(treCont)">{{treCont.name}}</el-checkbox>//也可以使用input  type = checkbox  （项目中用的是element就直接拿来用了）
            <v-tree-header v-if="treCont.sub" @changeTreeCheck="changeTree1" :default-tree="treCont.sub"></v-tree-header>
        </div>
    </div>
</template>

<script>
    import vTreeHeader from "../components/treeHeader";

    export default {
        components:{
            vTreeHeader
        },
        name: "treeContent",
        props: {
            defaultTreeCont: {
                type: Array,
                default:()=>[]   //默认值
            }
        },
        data() {
            return {}
        },
        created() {
        },
        methods: {
            changeTree(e){
                this.$emit('changeTreeCheck',e.check,e.all_id,e);
            },
            changeTree1(is_check,all_id,change_arr){
                this.$emit('changeTreeCheck',is_check,all_id,change_arr);
            }
        }
    }
</script>

<style scoped>
    ._tree_cont{
        padding-left: 15px;
    }
</style>

以上两个组件用来渲染树形结构，要使用的话还需要在页面上引用。引用方法如下

<template>
   <div class="component_tree">
       <v-tree :default-tree="initTreeData" @changeTreeCheck = "treeChange"></v-tree>
   </div>

</template>
 import vTree from "./treeHeader";
    export default {
        components:{
            vTree
        },
         props: {
            defaultTreeData: {//树的数据
                type: Array,
                default:[]   //默认值
            },
            defaultTreeCheckData:{//已选中的数据
                type:Array,
                default: []
            },
        },
        ....（这里就不写你那么多了 只需要把数据赋值给  initTreeData 就会出现树形组件的dom ）
      }

以上内容只是生成组件的dom结构，监听了点击事件，点击事件中能获取到当前点击的元素是否被选中暂时先写这么多
也可以使用