<template>
    <div>
        <h1>树控件</h1>
        <TreeViewNode v-for="data in categories"
                      :node="data"
                      :key="'asset-category-' + data.id"
                      :isRoot="true"
                      :isShowCheck="true"
                      v-on:nodeSelect="categorySelect">
        </TreeViewNode>

        <div>选择的节点: {{ selectedNode.id }}.{{ selectedNode.text}}</div>
    </div>
</template>

<script>


import TreeViewNode from "@/tree/index.js";

export default {
    name: 'date-example',


    data: function () {
        return {
            categories: [
                {
                    id: "1",
                    text: "树节点1",
                    childrenDatas: [
                        {
                            id: "1-1",
                            text: "树节点1-1"
                        }, {
                            id: "1-2",
                            text: "树节点1-2"
                        }
                    ]
                }, {
                    id: "2",
                    text: "树节点2"
                }, {
                    id: "3",
                    text: "树节点3"
                },
            ],

            selectedNode: {}
        }
    },

    components: {
        TreeViewNode,
    },

    methods: {

        /**
         * 类别选择发生改变
         */
        categorySelect: function (node) {
            node.selected = !node.selected;
            this.selectedNode = node;
        },

    }
}
</script>

<style>
</style>
