SOURCE

console 命令行工具 X clear

                    
>
console
const defaultData = [
                        {
                        title: "parent 1",
                        children: [
                            {
                            title: "parent 1-1",
                            children: [
                                {
                                title: "leaf 1-1-1"
                                },
                                {
                                title: "leaf 1-1-2"
                                }
                            ]
                            },
                            {
                            title: "parent 1-2",
                            children: [
                                {
                                title: "leaf 1-2-1"
                                },
                                {
                                title: "leaf 1-2-1"
                                }
                            ]
                            }
                        ]
                        }
                    ]
new Vue({
    el: '#app',
    data() {
        return {
            searchValue:'',
            onlyLeaf: false,
            filterable: false,
            lockSelect: false,
            hoverSelect: false,
            data: JSON.parse(JSON.stringify(defaultData))
        }
    },
    methods: {
        /**
         * 切换展示效果
         * @param {String} type - 当前切换的属性
         */
        handleSwitch(type) {
            this.searchValue = '';
            this.onlyLeaf = false;
            this.filterable = false;
            this.lockSelect = false;
            this.hoverSelect = false;
            this[type] = true;
            this.data = JSON.parse(JSON.stringify(defaultData))
        }
    }
})
<div id="app">
    <div class="btn-group">
        <div class="item">
            <span class="label">only-leaf</span>
            <i-switch v-model="onlyLeaf" @on-change="handleSwitch('onlyLeaf')" />
        </div>
        <div class="item">
            <span class="label">lock-select</span>
            <i-switch v-model="lockSelect" @on-change="handleSwitch('lockSelect')" />
        </div>
    </div>
    <i-input v-model="searchValue" placeholder="请输入搜索关键字"></i-input>
    <uino-tree :data="data" labelKey="title" :filterable="searchValue" :auto-expand="1" :only-leaf="onlyLeaf" :lock-select="lockSelect" />
</div>
#app {
    padding: 20px;
}
.btn-group {
    display: flex;
    align-items: center;
    margin: 0px -15px 15px -15px;
}
.btn-group .item {
    padding: 0px 15px;
}
.btn-group .item .label {
    padding-right: 5px;
}

本项目引用的自定义外部资源