:::demo 示例

```html
<template>
<div class="demo-list">
    <h3>示例一：基础树组件（不显示边框）</h3>
    <hr>
    <div class="treedemo clear">
        <div class="left">
            <v-ztree
                :data="data2"
                :height="160"
                :width="220"
                :border-css="borderCss"
                show-checkbox
                node-key="id"
                ref="tree1"
                :default-expanded-keys="['F006', 'S008003']"
                :default-checked-keys="['S006002']"
                :props="defaultProps"
                @check-change="checkChange"
            >
            </v-ztree> 
        </div>
        <div class="left opBox">
            <p>自动匹配选中项：{{ selectItems1 }}</p>
            <button @click.stop="getCheckedKeys">确定</button>
            <p>点击button选中项：{{ selectItems2 }}</p>
        </div>
    </div>
    <h3>示例二：基础树组件: 部分节点禁用</h3>
    <hr>
    <div class="treedemo clear">
        <div class="left">
            <v-ztree
                :data="data3"
                :height="160"
                :width="220"
                show-checkbox
                node-key="id"
                ref="tree2"
                :default-expanded-keys="['F006']"
                :default-checked-keys="['S006001']"
                :props="defaultProps"
                @check-change="checkChange2"
            >
            </v-ztree>
        </div>
        <div class="left opBox">
            <p>自动匹配选中项：{{ selectItems6 }}</p>
            <button @click.stop="getCheckedKeys2">确定</button>
            <p>点击button选中项：{{ selectItems7 }}</p>
        </div>
    </div>
    <h3>示例三：基础树组件: 不显示checkbox</h3>
    <hr>
    <div class="treedemo clear">
        <div class="left">
            <v-ztree
                :data="data1"
                :max-height="220"
                :width="220"
                :props="defaultProps"
                @node-click="handleNodeClick"
            >
            </v-ztree> 
        </div>
        <div class="left opBox">
            {{ selectItems3 }}
        </div>
    </div>
    <h3>示例四：基础树组件: 对于同一级的节点，每次只能展开一个</h3>
    <hr>
    <div class="treedemo clear">
        <div class="left">
             <v-ztree
                :accordion='true'
                :data="data1"
                :max-height="220"
                :width="220"
                :props="defaultProps"
                @node-click="handleNodeClick2"
            >
            </v-ztree> 
        </div>
        <div class="left opBox">
            {{ selectItems4 }}
        </div>
    </div>
    <h3>示例五：下拉选中树组件</h3>
    <hr>
    <div class="treedemo clear">
        <div class="left">
             <v-select-tree
                :datas="data2"
                :input-width="180"
                :tree-width="220"
                :max-height="300"
                :result-need-child-data='false'
                size="small"
                :default-expanded-keys="[2, 3]"
                :default-checked-keys="[5]"
                @get-checked-items="getAllCheckedItems"
            >
            </v-select-tree> 
        </div>
        <div class="left opBox">
            <p>选中项：{{ selectItems5 }}</p>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'VZtreeDemo',
    data () {
        return {
            data1:[
                {
                    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'
                        }]
                    }]
                }
            ],
            data2: [{
                id: "F006",
                label: "按东财行业",
                children: [
                    { id: "S006001", label: "农林牧渔" },
                    { id: "S006002", label: "食品饮料" },
                    { id: "S006004", label: "轻工制造" },
                    { id: "S006005", label: "能源" }
                ]
            }, {
                id: "F008",
                label: "按申万行业",
                children: [{
                        id: "S008001",
                        label: "农林牧渔",
                        children: [
                            { id: "T008001001", label: "种植业" },
                            { id: "T008001002", label: "渔业" },
                            { id: "T008001003", label: "林业" },
                            { id: "T008001004", label: "饲料" },
                            { id: "T008001005", label: "农产品加工" },
                            { id: "T008001006", label: "农业综合" },
                            { id: "T008001007", label: "畜禽养殖" },
                            { id: "T008001008", label: "动物保健" }
                        ]
                    },{
                        id: "S008003",
                        label: "化工",
                        children: [
                            { id: "T008003001", label: "石油化工" },
                            { id: "T008003002", label: "化学原料" },
                            { id: "T008003003", label: "化学制品" },
                            { id: "T008003004", label: "化学纤维" },
                            { id: "T008003005", label: "塑料" },
                            { id: "T008003006", label: "橡胶" }
                        ]
                    },
                    {
                        id: "S008004",
                        label: "钢铁",
                        children: [
                            { id: "T008004001", label: "钢铁" }
                        ]
                    },{
                        id: "S008006",
                        label: "电子",
                        children: [
                            { id: "T008006001", label: "半导体" },
                            { id: "T008006002", label: "元件" },
                            { id: "T008006003", label: "光学光电子" },
                            { id: "T008006004", label: "其他电子" },
                            { id: "T008006005", label: "电子制造" }
                        ]
                    },{
                        id: "S008012",
                        label: "医药生物",
                        children: [
                            { id: "T008012001", label: "化学制药" },
                            { id: "T008012002", label: "中药" },
                            { id: "T008012003", label: "生物制品" },
                            { id: "T008012004", label: "医药商业" },
                            { id: "T008012005", label: "医疗器械" },
                            { id: "T008012006", label: "医疗服务" }
                        ]
                    }
                ]
            }],
            data3: [{
                id: "F006",
                label: "按东财行业",
                disabled: true,
                children: [
                    { id: "S006001", label: "农林牧渔" },
                    { id: "S006002", label: "食品饮料", disabled: true },
                    { id: "S006004", label: "轻工制造", disabled: true },
                    { id: "S006005", label: "能源" }
                ]
            }, {
                id: "F008",
                label: "按申万行业",
                children: [{
                        id: "S008001",
                        label: "农林牧渔",
                        children: [
                            { id: "T008001001", label: "种植业" },
                            { id: "T008001002", label: "渔业" },
                            { id: "T008001003", label: "林业" },
                            { id: "T008001004", label: "饲料" },
                            { id: "T008001005", label: "农产品加工" },
                            { id: "T008001006", label: "农业综合" },
                            { id: "T008001007", label: "畜禽养殖" },
                            { id: "T008001008", label: "动物保健" }
                        ]
                    },{
                        id: "S008004",
                        label: "钢铁",
                        children: [
                            { id: "T008004001", label: "钢铁" }
                        ]
                    },{
                        id: "S008012",
                        label: "医药生物",
                        children: [
                            { id: "T008012001", label: "化学制药" },
                            { id: "T008012002", label: "中药" },
                            { id: "T008012003", label: "生物制品" },
                            { id: "T008012004", label: "医药商业" },
                            { id: "T008012005", label: "医疗器械" },
                            { id: "T008012006", label: "医疗服务" }
                        ]
                    }
                ]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            selectItems1: [],
            selectItems2: [],
            selectItems3: '',
            selectItems4: '',
            selectItems5: [],
            selectItems6: [],
            selectItems7: [],
            // 边框样式
            borderCss: 'none'
        }
    },
    methods: {
        checkChange (val) {
            this.selectItems1 = this.$refs.tree1.getCheckedKeys();
        },
        checkChange2 (val) {
            this.selectItems6 = this.$refs.tree2.getCheckedKeys();
        }, 
        getCheckedKeys () {
            this.selectItems2 = this.$refs.tree1.getCheckedKeys();
        },
        getCheckedKeys2 () {
            this.selectItems7 = this.$refs.tree2.getCheckedKeys();
        },
        handleNodeClick (data) {
            this.selectItems3 = data;
        },
        handleNodeClick2 (data) {
            this.selectItems4 = data;
        },
        // 获取选中项ID
        getAllCheckedItems (val) {
            this.selectItems5 = val ? val.join(',') : ''
        }
    }
}
</script>
<style scoped>
.treedemo {
    padding: 10px;
}
.left{
    float: left;
}
.opBox{
    border:1px solid #d1dbe5;
    border-radius: 10px;
    margin-left: 50px;
    width: 50%;
    height: 220px;
}
.clear:after {
    clear: both;
    content: '';
    display:block;
    width: 0;
    height: 0;
    visibility:hidden;
}
</style>
```
:::