Vue(简单的目录树组件)---附注释_目录树管理 vue

<template>

    <el-tree

        ref="tree" 

        :data="layers"    #绑定数据

        show-checkbox   

        node-key="name"  #key为对象的name属性

        :default-expand-all="true"    #默认全部展开

        @check-change="checkChange"   #节点选中改变事件

    ></el-tree>

</template>

上述绑定的对象是 layers，接下来主要就是看对象数组的书写，[{name:"",label:""}] name在上述已经被我们设置为key，label就是显示的值。如果我们的节点还有子节点，那么这个节点应该这样写{name:"",label:"",children:[{name:"",label:""}]}，如果还有节点那就依次类推。

<script>

export default {

    name: "layerTree",

    data() {

        return {

            layers: [

                {

                    name: "爸爸",

                    label: "爸爸",

                    children: [

                        { name: "乔治", label: "乔治" },

                        { name: "佩奇", label: "佩奇" },

                    ],

                },

                {

                    name: "妈妈",

                    label: "妈妈",

                    children: [{ name: "小猪", label: "小猪" }],

                },

            ],

            olmap: null,

        };

    },

    mounted() {},

    methods: {

        /**

         * 所有图层全选

         */

        checkedAll() {

            let checkedNodes = [];

 

            //遍历所有的图层数据

            for (let layerindex in this.layers) {

                let layerSource = this.layers[layerindex];

 

                //判断是不是有节点孩子

                if (layerSource.children != null) {

                    //将下节点添加至数组

                    checkedNodes.push(layerSource.name);

                }

            }

 

            //通过key设置节点选中。官当得例子也是这样得，通过setCheckedKeys输入key数组来选中节点。

            this.$refs.tree.setCheckedKeys(checkedNodes);

        },

        /**

         * 目录树选中状态更换

         */

        checkChange(nodeData, isCheck, childreChecked) {

            

        },

    },

};

</script>

 

<style scoped>

</style>

 

 

上述代码去掉#和图片可直接练习使用。