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: {
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;
}